vue-cli起项目步骤
一、 安装 node.js
安装完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。
二、安装webpack
命令：npm install webpack -g
安装完成后使用webpack -v，如果出现相应的版本号，则说明安装成功。
三、安装 vue-cli
命令：npm install -g vue-cli
安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功。
如果提示无法识别 vue，可能是 npm 版本过低，可使用 npm install -g npm 来更新版本
四、使用vue-cli来构建项目
1、在硬盘中找一个放项目的文件夹
2、在文件夹下打开命令盘，输入命令
Vue-Project是我们自己设置的项目名称，项目名称不能用中文
命令：vue init webpack Vue-Project
3、进入项目工程目录
4、安装项目所需依赖 npm install
5、安装 vue 路由模块 vue-router 和网络请求模块 vue-resource
命令：npm install vue-router vue-resource --save
创建完成的项目目录，如下图
各个目录的作用
最后一步启动项目
命令：npm run dev
启动成功，打开浏览器8080窗口，页面如图所示
关于vue create 和vue init webpack的区别 ？
vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档 网页链接 。vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置)
或
另一种：
vue创建项目时上下箭头不可用
使用vue-cli创建项目时，发现上下箭头不可用。
default 是使用默认配置，Manually select features 是自定义配置，但是上下的箭头不可用，无法进行选择。
解决方法：
这时候将 vue create 项目名 这个指令改为 winpty vue.cmd create 项目名 即可。
vuecreatehello-world是vuecli2创建
vuecreatehello-world是vuecli2创建。vueinitwebpack项目名，这个是cli2创建方式，要安装那个版本的Vue，创建成功，之后根据提示操作即可。
vue3创建项目vue create project过程很慢加载不动
三种方法：推荐第三种
修改vueclie构建的npm源：
打开C:\Users\admin.vuerc文件
useTaobaoRegistry配置如果是true改为false就可以了，或者情况相反的改为true。
1.安装cgr切换源
2.查看有哪些源
3.切换源
上两种方法有时会不成功，推荐使用方法三
安装 开发者边车 （dev-sidecar）
开发者边车，命名取自service-mesh的service-sidecar，意为为开发者打辅助的边车工具，通过本地代理的方式将https请求代理到一些国内的加速通道上
支持windows,MAC
1.安装方法及说明：
稳步github
如github打不开，可以 用Gitee镜像地址
2.安装成功后，打开dev-sidecar软件
3.在首页默认模式中开启npm加速
4.再用vue create project创建项目
注：创建项目前反npm源回复到默认状态，不要用taobao或其它了
入门菜鸟git上创建简单vue项目
eg：vue-create，然后点击创建，就会显示
最后，刷新gitee上的仓库地址，就可以看到全新的vue项目了
如果 git push -u origin master 还是提示有冲突，且你的项目是个人独立开发，且以本地项目为主，则可以强制推送，用本地项目覆盖git上的项目：
构建实用VUE3项目
还没用几天VUE，就到3了，本文旨在记录构建一个实用项目模板昂。
1、自然是将VUE-CLI升级到最新版本啦（卸载旧的，安装zhui新的）
npm uninstall -g vue-cli
npm install -g @vue/cli
你要是想看看脚手架的版本，那敲这个
vue --version
2、构建你的项目吧
vue create myproject
进入配置的时候问你愿不愿意，你打YES就好
还有就是，既然想要VUE3的，记得选VUE3就好
到了这儿，一个原始的项目就有啦。
3、在项目目录中，建一个名叫vue.config.js的文件，并且在这个文件里导出一个对象。至于这个对象里的选项和配的值，那就又可以写一篇了
4、配置路由（和子路由）
1）安装好路由插件 cnpm i vue-router@next -D
2）在src目录下创建 router/index.js
3）在根目录的main.js里面引入路由 import router from './router'
4) 在Vue对象中加入router的配置
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: '/login'
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/',
component: resolve = require(['../views/Index.vue'], resolve),
redirect: '/home',
children: [
{
path: 'home',
name: 'home',
component: resolve = require(['../views/home/Home.vue'], resolve),
meta: { title: '首页'}
},
{
path: '/programCard',
name: 'programCard',
component: resolve = require(['../views/programCard/card.vue'], resolve),
meta: { title: '路由1'}
}
]
}
]
const router = new VueRouter({
mode: 'hash',
base: process.env.BASE_URL,
routes
})
export default router
5、安装VUEX并使用
1)安装vuex cnpm i vuex@next -D
2）在src目录下创建 store/index.js
3）在根目录的main.js里面引入 import store from './store'
4) 在main.js里加入store的配置
6、配置axios
1) 安装vuex cnpm i axios@next -D
2) 在src目录建立api/request.js,并在其中引入axios import axios from 'axios'
在request.js中创建axios实例
添加请求拦截器和响应拦截器
再将实例导出export
3)在src目录建立api/index.js,引用axios实例，并统一定义请求函数
7、在src下建立views目录和路由子目录home/Home.vue
8、在assets目录增加css 、iconfont、images、js目录，存放资源
9、根目录下建立static\global.js
定义常量 const API_ROOT='127.0.0.1:8081'
建立对象window.global={
url:{
apiUrl:"http://"+API_ROOT+"/"
}
}