ps:初入Vue坑的小伙伴们,对于独立做一个项目可能不清楚需要使用哪些资源,这篇随笔希望对大家有所帮助。

第一步:参照vue的官方文档,建立一个vue的项目

# 全局安装 vue-cli
$ npm install --global vue-cli (如果电脑上面已有vue项目并能正常运行,基本上代表已全局安装此步,那么就可跳过此步,执行第二步,如果执行第二步的时候报第一步的错误,再执行第一步即可)
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 切换到新建文件夹
$ cd my-project
# 安装node-modules模块里面的包
(我之前在这一块遇到坑(当时在node-modeles文件夹里面去执行npm install 命令,导致包一直不能正常下载,小伙伴们千万不要踩坑啦),执行npm install 一定要在node-modules文件夹外面,)
npm install / cnpm install(要安装cnpm)
# 运行vue项目
$ npm run dev

第二步:一般需要安装的资源(如果项目对资源版本没有要求的话,一般下载的资源都是最新的哟)

"axios": "接口请求",
"babel-polyfill": "最新语法的解析",
"fastclick": "移动端click",
"qrcanvas-vue": "二维码",
"swiper": "轮播图",
"vue": "vue框架",
"vue-router": "路由跳转",
"vuex": "状态管理器",
ps:资源后面的文字是我自己的理解,如果有问题也请小伙伴们帮忙指正。
第三步: 部分资源需要修改或创建文件及引入
1,axios需要创建一个文件夹,对get或post请求进行封装(不允许跨域)
2,fastclick 需要在main.js里面写入此句代码

// 修复点击300ms延迟
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', () => {
FastClick.attach(document.body)
}, false)
}

3,swiper使用此插件需要引入swiper.min.css

4,vuex需要创建一个文件夹store,在里面建一个store.js文件,写入此句代码 
import Vue from 'vue'
import Vuex from 'vuex'
const sessionStoragePlugin = store => {
store.subscribe((mutation, state) => {
Object.keys(state).forEach((item, index) => {
window.sessionStorage.setItem(item, JSON.stringify(state[item]))
})
})
}
Vue.use(Vuex)
export default new Vuex.Store({
plugins: [sessionStoragePlugin]
})
最后这个store要挂载在main.js实例里面
new Vue({
el: '#app',
router,
store,
components: {
App
},
template: '<App/>'
})

使用VUE框架搭建项目基本步骤的更多相关文章

  1. vue框架搭建的详细步骤之项目结构(二)

    上一篇中简单的创建了一个脚手架,这篇简单的讲一下脚手架的项目结构:     (1).build/ 此目录包含开发服务器和生产webpack构建的实际配置.通常,您不需要触摸这些文件,除非您要自定义We ...

  2. vue框架搭建的详细步骤(一)

    在这里我们先快速的搭建一个vue的脚手架: (1).在安装vue的环境之前,安装NodeJS环境是必须的.可以使用node -v指令检查,需要保证安装了4.0版本以上的nodeJS环境. 没有安装的话 ...

  3. Vue 框架-12-Vue 项目的详细开发流程

    Vue 框架-12-Vue 项目的详细开发流程 首先,如果你还不了解 Vue 脚手架怎么搭建? 默认的环境中有哪些文件? 文件大概是什么作用? 那么,您要先查看之前的文章才有助于你理解本篇文章: Vu ...

  4. ssh框架搭建的基本步骤(以及各部分作用)

    ssh框架搭建的基本步骤(以及各部分作用)     一.首先,明确spring,struts,hibernate在环境中各自的作用.   struts: 用来响应用户的action,对应到相应的类进行 ...

  5. 从零开始--Spring项目整合(1)使用maven框架搭建项目

    这些年一直在用spring的框架搭建项目,现在开始我们从零开始利用Spring框架来搭建项目,目前我能想到有Spring.SpringMVC.SpringJDBC.Mybatis.WebSockt.R ...

  6. vue新手入门之使用vue框架搭建用户登录注册案例,手动搭建webpack+Vue项目(附源码,图文详解,亲测有效)

    前言 本篇随笔主要写了手动搭建一个webpack+Vue项目,掌握相关loader的安装与使用,包括css-loader.style-loader.vue-loader.url-loader.sass ...

  7. vue框架搭建--axios使用

    前后端数据交互作为项目最基础需求(静态的除外),同时也是项目中最重要的需求. 本文重点介绍axios如何配合vue搭建项目框架,而axios的详细使用介绍请移步使用说明 1.安装 cnpm insta ...

  8. Vue环境搭建-项目的创建-启动生命周期-组件的封装及应用

    vue项目环境的搭建 """ node >>> python:node是用c++编写用来运行js代码的 npm(cnpm) >>> p ...

  9. ABP框架搭建项目系列教程基础版完结篇

    返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 经过前面十二篇的基础教程,现在终于该做个总结了. 回顾 第一篇,我们建议新手朋友们先通过ABP官网的启动模板生成解决方案,因为这样 ...

随机推荐

  1. bugfree3.0.1-修改“优先级”为中文引起的PHP Error

    博主在搭建好bugfree后,修改了系统中“优先级”字段,将原先系统定义的优先级“1.2.3.4”修改为符合博主自己项目要求的优先级“高.中.低”.修改成功后,系统确实将原先提交的BUG优先级从“1. ...

  2. Rosserial实现Windows-ROS交互操作

    安装 sudo apt-get install ros-indigo-rosserial-windows sudo apt-get install ros-indigo-rosserial-serve ...

  3. Django基本配置与URLconf

    what's the Django python的框架主要有:Django.Flask.Tornado Django是一个开放源代码的Web应用框架,由Python写成.它的主要特点是大而全,我们需要 ...

  4. docker单机网络类型

    docker单机网络类型概述 Docker 安装时会自动在 host 上创建三种网络  分别为 bridge    host   none .   可用 docker network ls 命令查看 ...

  5. java之IDEA中使用Maven

    Maven的安装与使用 安装 1.下载,官网下载. 2.解压,存放路径中不可包含空格和中文.如:"E:\dev\workspace\maven\apache-maven-3.6.0" ...

  6. python进阶之 进程&线程区别

    1.进程创建方式 import time import os from multiprocessing import Process def func (): time.sleep(1) print( ...

  7. python爬取网易云音乐歌曲评论信息

    网易云音乐是广大网友喜闻乐见的音乐平台,区别于别的音乐平台的最大特点,除了“它比我还懂我的音乐喜好”.“小清新的界面设计”就是它独有的评论区了——————各种故事汇,各种金句频出.我们可以透过歌曲的评 ...

  8. React之ant design的table表格序号连续自增

    render(text,record,index){     return(       <span>{(pagination.current-1)*10+index+1}</spa ...

  9. Selenium上机实验

    1.安装SeleniumIDE插件 2.学会使用SeleniumIDE录制脚本和导出脚本 3.访问https://psych.liebes.top/st使用学号登录系统(账户名为学号,密码为学号后6位 ...

  10. Openstack-Ceilometer-Alarm运行机制

    1校验 对alarm列表进行定时监测,如果发现与设置的limit值不满足,则发出警报 监控服务分为三种:默认服务,单进程校验服务和分布式校验服务.根据配置来决定,默认配置:default Alarm状 ...