Vue脚手架搭建项目

1.安装node.js,官网下载：https://nodejs.org/en/download/
安装完成之后一次输入node -v 和 npm -v 查看是否安装成功和版本号

2.利用淘宝镜像安装cnpm，网上一致推荐cnpm比npm好用，此步骤可以省略，npm一样可以用
npm install cnpm -g --registry=https://registry.npm.taobao.org
安装完成输入cnpm -v 查看是否安装成功和版本号

3.安装vue-cli
cnpm install -g vue-cli 或 npm install -g vue-cli # 如果没有安装cnpm就是用npm来安装，下面使用cnpm的地方都可以使用npm代替
查看vue版本号 vue -V # 注：V是大写字母V，查看是否安装成功和版本号

注意： 如果提示“无法识别 ‘vue’ ” ，有可能是npm版本过低，需要手动更新npm的版本号，npm版本尽量保证新

使用 npm install -g npm 更新npm版本

4.使用vue-cli来创建一个基于 webpack 模板的新项目
首先cd到项目需要保存的文件夹下，此处使用git bash
vue init webpack “项目名称–自定义” # webpack：模板类型
模板类型有：
browserify – 全功能的Browserify + vueify，包括热加载，静态检测，单元测试
browserify-simple – 一个简易的Browserify + vueify，以便于快速开始。
webpack – 全功能的Webpack + vueify，包括热加载，静态检测，单元测试
webpack-simple – 一个简易的Webpack + vueify，以便于快速开始。
然后会有很多提示，一路回车就可以创建完成

5.安装项目所需要的依赖

进入新建的项目文件夹下

cnpm install

注：此处也可根据需要自行安装，因为执行上面命令会安装一些不需要的依赖

6.运行项目
cnpm run dev

vue项目默认端口8080，运行成功后在浏览器直接127.0.0.1:8080可直接访问，如果端口已被占用可在config文件夹下index.js中修改

退出ctrl+c

7.后续其它步骤—打包上线
项目开发完成之后，可以输入 npm run build 来进行打包工作。打包完成后，会生成 dist 文件夹。

目录结构：
build ----> 脚本目录
config ----> 配置目录
node-modules ----> 依赖的node工具包目录
src ----> 源码目录
assets ----> 资源目录
components ----> 组件目录
touter ----> 路由目录
App.vue ----> 页面级vue组件
main.js ----> 页面入口js文件
static ----> 静态文件目录(直接拷贝到dist/static/里面)
test ----> 测试文件目录
.babelrc # babel 配置文件
.editorconfig # 编辑配置文件
.gitignore # 用来过滤一些版本控制的文件，比如node_modules文件夹
index.html # index.html 入口模板文件
package.json # 项目文件，记载着一些命令和依赖还有简要的项目描述信息
README.md # 介绍自己这个项目的

添加新的路由和页面
1.在src–route–index.js # 需要以相对路径引入新添加的vue文件，如import login from ‘…/components/login’
原：
export default new Router({
routes: [
{
path: ‘/’,
name: ‘HelloWorld’,
component: HelloWorld
}
})
修改后：
export default new Router({
routes: [
{
path: ‘/’,
name: ‘HelloWorld’,
component: HelloWorld
},
{
path: ‘/login’, # 路由路径
name: ‘login’, # 路由名
component: login # 路由vue文件
}
],
mode:“history” # 修改模式，注：必须添加，不添加无法正常访问
}) # 增加一条路由
2.在src–components下新建.vue文件，vue文件一共由三部分
（1）： # 书写html标签，此处可以用vue模板语法，包括v-bind，v-if等语法
（2）：js部分，此处需要发起axios请求，需要先安装axios，cnpm install axios -S，安装之后可以直接在当前.vue文件script中引入
或者在main.js中引入，并将axios添加到this的方法中，调用名自定义，注：在main.js中引入不能在当前vue文件直接用
（3）： 书写css样式，注：此处一般需要加scoped以确保css样式只在当前.vue文件使用