什么是vue-cli ：
官方提供的一个脚手架，用于快速创建一个vued的模板；
预先定义好目录结构及基础代码；使开发更加快捷
统一目录结构
本地调试
热部署
单元测试
集成打包上线。
一个新的电脑创建vue工程的步骤：
vue工程依赖node.js
第一步：安装node.js,官网下载无脑安装， 配置环境变量
安装 淘宝镜像（全局安装：npm install cnpm -g）： 国内镜像快；
第二步： 安装vue-cli (cnpm install vue-cli -g ) 【有的全局安装在用户的appdata目录下，可以修改默认全局安装路径】
查看是否安装成功
查看可以基于那些模板创建vue应用程序 命令：vue list
第一个vue-cli应用程序：
1、建立一个存放项目的文件夹
2、创建一个基于webpack模板的vue应用程序
命令：vue init webpack 项目名（l例如：vue init webpack myvue）
一路都选择no即可；
项目名称 ：Project name 默认回车即可
项目描述：Project description: 默认回车即可
初始化并运行：
cd 项目目录： （例如：cd myvue）
npm install (根据项目中的package.json文件中的依赖下载东西,相当于maven的pom.xml文件)
执行完之后项目中目录多了很多依赖（node_modules），如果执行过程有警告，错误，按照提示进行修复。
运行项目：npm run dev （启动时中有打包的过程，vue.js是基于ES6规范的，打包之后降级为ES5，因为目前大部分浏览器只支持ES5规范，提高了代码的兼容性）
通过访问地址进行访问
webpack
配置： 创建webpack.config.js 配置文件（一般使用vue-cli脚手架创建的项目都自动生成了这个文件）
配置的内容：
entry：入口文件：指定Webpack用那个文件作为项目的入口
output：输出，指定webPack 把处理完成的文件放置到指定路径。
module：模块，用于处理各种类型的文件
plugins 插件，用于热更新，代码重用等
resolve： 设置路径指向
watch： 监听， 用于设置文件改动后直接打包。
打包之后，如果想实现热部署，
可以运行指令：webpack --watch
Vue的组件安装使用：
vue-router 组件
安装 vue-router 插件
进入项目所在的包
执行：npm install vue-router --sava-dev
命令解释： --save-dev 保存包config包下的相关的dev文件。
怎么用？
安装路由，在src目录下，新建一个文件夹：router 专门存放路由，创建一个index.js主的路由配置文件
路由有两种模式：
一种是hash 路径带# ，默认的
一种是history： 路径不带#
可以在index.js中通过mode属性设置，值是字符串
例如：
export default new Router（{
mode: 'history'
routes:[
]
}）
编写index.js的内容：
第一步：
导入路由插件 import VueRouter from 'vue-router'
导入Vue import Vue form 'vue'
导入组件， import Content from ‘../components/Content ’
<--显示的使用,安装路由-->
Vue.use(VueRouter,router)
第二步骤：配置路由规则
export default new VueRouter（{ //这里的VueRouter和上边导入的一致即可。
routes:[
{
path: '/content', //路由路径
name:'Content', // 路由名称
component:Content //跳转到组件，前提是需要导入这个组件
}，
{
path: ''
name:''
component:'' //注意：这里是componet 没有s 否则路由失效。
}
]
}）
第三步：
在main.js中配置路由：
//导入上边创建的路由配置目录,会定位到index.js路由配置文件
import router from ‘./router’
import Vue from 'vue'
import App from './APP'
new Vue({
el：‘#app’,
router, //配置路由
components:{
App,
}
template:'<App/>'
});
第四步：
在组件中使用：
例如在App.vue使用路由
<template>
<div id=“app”>
<router-link to="/main">首页</route-link>
<router-link to="/content">首页</route-link>
<router-view></router-view> //路由视图，配置这个的目的就是当点击路由之后，跳转到路径对应的组件的内容会在这里显示。
</div>
</template>
<script>
export default{
name: 'App'
}
</script>
路由传参，路由嵌套；
路由传参例子：
变化1 to属性需要绑定， to的值传递的是一个对象。规定对象里包含路径和 参数。语法如下：
<router-link :to="{name:'配置的组件路由路径'，prams:{id:1}}">
变化2：
router的 index.js 中对应的路由，
{
path: "/路径/:id",
name: ‘组件名’
componnent:组件，
props: true,
}
变化3， 接收参数的组件的修改，修改后就可以在template便签中使用了。
<template>
<div>
<!--所有的属性不能直接在template这个跟节点下使用-->
<h1>{{id}}<h1>
<div>
</template>
export default{
props:['id','其他传递的参数'] , //修改的位置
}
路由定义重定向：
{
path: '/tohome'
redirect: '/main'
}
如有需要，可以在这个组件的export default{
}中添加一些钩子函数
例如：export default{
name: 'UserList',
beforeRouteEnter:(to,from, next)=>{
console.log("进入路由之前")
next();
}，
beforeRouteLeave:(to,from, next)=>{
console.log("离开路由之前")
next();
}
}
路由钩子函数的参数说明：
to: 路由将要跳转的路径信息
from ：路径跳转前的路径信息
next： 路径的控制参数
next（）：跳转下一个页面
next（‘/path’）改变路由的跳转方向，使其跳转到另外一个路由；
next（false） 返回原来的页面；
next(（vm）={} )仅在beforeEnter中可用。Vm是组件的实例
如果需要创建一个新的组件配置路由，在路由router中的index.js中导入该组件，并配置一下它的路由规则就好了。 就可以在其他组件中用<router-link to='/该组件路径'>指向他就好了。 如果要显示，需要使用<router-view> 标签 //这个标签是用来显示路由对应的内容的。
在项目中引入其他组件，插件
进入项目的目录；
此处cmd
安装element-ui
npm i element-ui -s
如果还没有安装依赖，安装一下
npm install
安装 SASS加速器 【Css需要】
npm install sass-loader node-sass --save--dev
如果项目编码要用，在入口文件import导入该组件。并显示的使用它。
编写代码；
#启动测试
npm run dev
注意：如果npm安装失败了，就根据提示解决， 如果还是解决不了就用 cnpm安装，前提已经安装了国内的淘宝镜像。
npm命令解释：
npm install moduleName 安装到项目目录下
npm install -g moduleName: -g意思是将模块安装到
全局目录下，具体在磁盘的哪里要看 npm的安装目录配置文件怎么配置的。也有默认位置
npm install -save moduleName： --save 将模块安装到项目目录下，并在package文件的dependencies节点写入依赖， -S为该命令的缩写
npm install --save-dev moduleName --save-dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖， -D为该命令的缩写。
ps: 如果启动的时候sass相关的东西报错，就可能是因为sass的版本太高了，先通过命令卸载当前版本（npm uninstall sass-loader），在package.json 找到sass-loader 对应的版本，修改成更低的版本，然后重新 npm install， 运行 就好了 ，
其实在开始安装的时候也可以指定版本 npm install sass-loader@7.3.1 --save-dev
vue脚手架工程 的static文件夹下的静态资源外界浏览器可以直接访问到不用配置路由。
如果访问的资源路由没有配置，static文件夹下静态资源也没有，应该给前端响应一个404的提示。要实现这个功能，可以定义一个NotFound的组件， 然后在路由中配置这个组件的路由为
{
path : ' * '
componet: NotFound
}
意思就是如果访问的路径，在路由中没有配置或静态资源中也没有，则这个路由接管，跳转到NotFound 页面，提醒用户。
1. 进入该vue项目目录，打开git bash，执行：npm run build(在package.json的scripts配置)
2. 安装express-generator生成器
执行 $ npm install express-generator -g 进行安装
3. 创建一个express项目
执行 $ express expressDemo （expressDemo是项目名）
4. 进入expressDemo目录，安装项目依赖
$ cd expressDemo
$ npm install
5. 把dist目录下的所有文件复制到express项目的public文件夹下
然后运行 $ npm start 启动expressDemo
打开浏览器，输入 http://localhost:3000 , 就可以看到效果了（如果想改变端口 可以在./bin/www这个文件中修改）
另外一种有效的方法：
官方文档有简单的方法:npm install -g serve(全局安装) serve -s dist(运行打包后的文件)
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
