Vue CLI、Vue Router、Vuex的使用
1. vue-cli(vue脚手架)创建项目
1.1 关于旧版本
- Vue CLI 的包名称由
vue-cli
改成了@vue/cli
。 - 如果你已经全局安装了旧版本的
vue-cli
(1.x 或 2.x),你需要先通过npm uninstall vue-cli -g
或yarn global remove vue-cli
卸载它。
1.2 Node 版本要求
-
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)
-
可使用
node -v
检查node版本
1.3 安装vue-cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
检查是否安装成功
vue --version
1.4 创建一个项目
vue create 项目名称
- 可以选默认的包含了基本的 Babel + ESLint 设置的 preset
- 也可以手动选择
- 上下箭头切换,选中之后按换行键 即可进到下一步
手动选择项目风格
上下箭头切换,空格键 选中或取消选中,换行进入下一步
- Babel:是一个js编译器,可以在打包的时候将ES6代码转化为ES5(向后兼容),选
- TypeScript:是Javascript的一个超集,支持ES6标准,可不选
- Progressive Web App (PWA) Support:PWA,渐进式的网页应用程序,可不选
- Router:Vue中用于管理路由的,选,也可通过指令安装(下文有介绍)
- Vuex:Vue中用于管理状态的,选,也可通过指令安装(下文有介绍)
- CSS Pre-processors:css预处理器,如果要用Sass, Less, Stylus 选,反之可不选
- Linter / Formatter:代码风格 格式校验,如果是做练习可不选,因为需要严格按照格式,
- Unit Testing:单元测试,不选
- E2E Testing: 端到端测试,不选
2. Vue Router 的安装与使用
2.1 安装vue-router
npm install vue-router
2.2 在项目中使用vue-router
-
可以在src目录下新建一个routes文件夹,然后创建一个index.js文件
-
在index.js 文件中
// 导入Vue import Vue from 'vue' // 导入Vue Router import VueRouter from 'vue-router' // 调用 Vue.use(VueRouter) // 定义路由 const routes =[ { path:'/',component:Home}, { path:'/detail',component:Detail} ] // 创建一个router实例 const router = new VueRouter({ routes // (ES6缩写) 相当于 routes: routes })
-
在main.js 文件中注入路由
import router from '../routes/index.js' const app = new Vue({ router }).$mount('#app')
-
通过
this.$router
在其它组件中访问路由对象,通常使用this.$router.push()
进行路由跳转 -
通过
this.$route
访问当前路由,里面有我们传入的query、params参数
3. Vuex 的使用
3.1 安装Vuex
npm install vuex --save
3.2 在项目中使用Vuex
-
可以在src目录中新建store文件夹,然后新建一个index.js 文件
-
在index.js 文件中
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 创建一个store 实例 const store = new Vuex.Store({ state:{ // 这里是一些变量 ... }, mutations:{ // 这里写一些方法改变state中的变量值 ... } })
-
在main.js 中注入store
import store from '../store/index.js' const app = new Vue({ store }).$mount('#app')
-
在别的组件中, 使用
this.$store.state.变量名
获取变量值 -
使用
this.commit('方法名')
调用mutations里面的方法变更状态.