vue-cli2创建一个项目
安装
npm install -g cnpm --registry=https://registry.npm.taobao.org // 顺便安装一下cpmn
npm install -g vue-cli
vue -V
2.9.6
看到vue版本号为2.9.6就Ok啦
创建项目
在cmd执行：
npm init webpack projectname
表示创建一个webpack模板的项目，除了webpack之后也还有其他模板，不过webpack使用频率最高，projectname不允许包含大写字母。
创建vue-cli过程中部分配置内容：
Intall vue-router(Y/N)? Y 页面路由，切换页面用的，必选项
Use ESlint to lint your code?(Y/N) 代码风格统一管理工具，一般都会有
其他选默认即可
# Project initialization finished!
# ========================
To get started:
cd test1
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
当看到上面的代码，就说明vue-cli项目创建成功啦
成功启动Vue-cli项目
执行
cd test1
npm run dev
启动node服务(后端服务)，然后打开http://localhost:8080就可以看到hellp-world的demo了
目录结构
src目录:
components : 组件目录
router > index.js: 用于配置页面路由
App.vue: 主组件
“页面”跳转方式
在Vue中，一切皆组件，所以所谓的“页面跳转”其实是组件的切换。
切换的配置都写在router文件夹下的index.js文件中，new一个router实例，参数为一个对象。
简单的介绍两种路由的格式:
第一种是平级路由，比如下面的A和B就是平级路由.path为路径，将作为router-link的to属性的属性值。component后面的值为通过import 引进来的组件对象。
// Hello-world.vue
<template>
<div>
<p>hello world!</p>
<router-link to="/a">转向A页面</router-link>
<router-link to="/b">转向B页面</router-link>
<router-view></router-view> // 当页面中有嵌套路由时才需要这一行代码
</div>
</template>
import A from '@/components/A'
import B from '@/components/B'
...
// Router构造函数的传参
{
routes:[
{
path:'/a',
component:A
},
{
path:'/b',
component:B
}
]
}
当点【转向A页面】时，hello world!会消失，页面会变成A组件中的内容，也就是说，A组件的内容会完全覆盖上一级组件。
第二种是嵌套路由，
// router配置
{
routes:[
{
path:'/',
component:Hello-world,
children:[
{
path:'/a',
component:A
},
{
path:'/b',
component:B
}
]
}
]
}
当点【转向A页面】时，会在hello world!的下面出现A组件的内容。也就是说，会保留父组件本身的内容。
样式优先级
在不冲突的情况下，子组件和父组件的样式都被采用。在冲突的情况下，哪个离得近哪个生效。
小贴士
地址栏中出现的#是什么作用，能不能去掉？
- hash模式：地址栏包含#符号，#以后的不被后台获取，可以减少http请求的数量
- history模式：具有对url历史记录进行修改的功能
- 在微信支付，分享url作为参数传递时，#不能满足需求
- history 需要后台配合，处理404问题
一个坑
关于卸载vue-cli2和vue-cli3的命令不同的坑。。。
//卸载3.0之前的版本
npm uninstall -g vue-cli
yarn global remove vue-cli
//卸载3.0之后的版本（可以统一使用此指令卸载）
npm uninstall -g @vue/cli
yarn global remove @vue/cli
参考资料：
