Vue脚手架
基本环境
安装node.js，从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。 安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如果出现相应的版本号，则说明安装成功。安装淘宝镜像，打开命令行工具，把这个（npm install -g cnpm --registry= https://registry.npm.taobao.org）复制运行。 安装完成之后输入 cnpm -v，如果出现相应的版本号，则说明安装成功。安装webpack和webpack-dev-server 打开命令行工具输入：npm install webpack webpack-dev-server -g， 安装完成之后输入 webpack -v，如果出现相应的版本号，则说明安装成功。安装vue-cli脚手架构建工具，打开命令行工具输入：npm install vue-cli -g， 安装完成之后输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。
vue-cli来构建项目
在硬盘上找一个文件夹放工程用的。这里有两种方式指定到相关目录：①cd 目录路径 ②如果以安装git的，在相关目录右键选择Git Bash Here安装vue脚手架输入：vue init webpack exprice ，注意这里的“exprice” 是项目的名称可以说是随便的起名， 需要注意的是项目的名称不能大写，“不能用中文”,不然会报错。。 1. Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写。 2. Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。 3. Author：作者，如果你有配置git，他会读取.ssh文件中的user。 4. Install vue-router? 是否安装vue的路由插件，Y代表安装，N无需安装，下面的命令也是一样的。 5. Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格（超级严格） 6. setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha。 7. Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试。 8. Should we run npm install for you after the project has been created?(recommended)npm 询问你使用npm安装还是yarn安装包依赖，我这里选择的是npm，yarn更快更好，使用yarn之前确保你的电脑已经安装yarn。cd 命令进入创建的工程目录，首先cd exprice（这里是自己建工程的名字）安装项目依赖：npm install，因为自动构建过程中已存在package.json文件， 所以这里直接安装依赖就行。不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)， 但是但是如果真的安装“个把”小时也没成功那就用：cnpm install 吧安装 vue 路由模块 vue-router，cnpm install vue-router -S启动项目 npm run dev
简单说明下脚手架每个目录的作用：
1. build: 项目构建(webpack)相关代码 2. config: 项目开发环境配置 3. node_modules: 依赖的node工具包目录 4. src: 源码目录 1. assets: 资源目录 2. components: 组件目录 3. router: 路由 4. store: 状态管理（vuex） 5. static: 静态文件目录 6. test: 测试目录
路由文件配置
！！第一种方法
import Vue from 'vue'
import Router from 'vue-router';
Vue.use(Router) //初始化路由
const Foo = { template: '<div>foo</div>' }; //Foo小组件
const Bar = { template: '<div>bar</div>' }; //Bar小组件
//定义路由
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
//路由的安装，使用路由
const router = new Router({
method:'history', //选取模式，历史模式和哈希模式
routes
})
export default router; //导出
！！第二种方法
import Vue from 'vue';
import Router from 'vue-router';
import Header from '文件路径'; //引入Header组件
import Nav from '文件路径'; //引入Nav组件
初始化路由
Vue.use(Router);
定义路由和路由的安装
const router = new Router({
routes: [ //配置路由
{
path: '/header',
component: Header，//在一级路由的template标签中插入二级路由的<router-view>标签
children: [
{
path: 'child', //二级路由 注意这里没有/ ，否则会被认为是绝对路径，不写是相对路径
component: Child //路由需要的组件
}
],
redirect: '/header/child' //设置进入header路由后，默认跳转到/header/child这个二级路由
},
{
path: '/nav/:id', //访问路径，路由名称 动态路由
component: Nav //路由需要的组件
},
{
path: '/*',
redirect: '/header' //重定向到‘header’路由
}
]
scrollBehavior(to, from, savedPosition) {
return { x: 0, y: 0} //滑动条自动到最顶端
}
})
export default router;
- 路由搭建完毕，路由插座
- 展示组件的区域
- 通过<router-view></router-view>嵌入页面
- 路由的句柄（点击跳转路由）
- 通过<router-link to="/nav"></router-link>来实现
- 这个标签默认在页面上渲染成<a>标签
- 可以通过tag属性指定渲染标签tag="button"
- 还可以通过【.router-link-active:{}】来指定被渲染的<router-link>标签的样式
状态管理文件配置
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
var store = new Vuex.Store({
//定义公共状态
state: {
isNavShow: false,
setHeaderName: '卖座电影',
setCity: '大连'
},
actions：{
//用于异步操作，方法名也都是大写的
CHANGE_COUNT_ACT(context,payload){
setTimeout(()=>{
//context 执行上下文，相当于this，这里是$store
context.commit('CHANG_COUNT',payload)
},1000)
}
},
mutations: { //同步的周期
//方法名字必须为大写
//用于同步操作，不能进行异步操作，否则devtools检测不到
CHANGE_NAV(state, payload) { //第一个参数为共享状态，第二个参数是其它组件传递的数据
state.isNavShow = payload;
},
CHANGE_HEADERNAME(state, payload) {
state.setHeaderName = payload;
},
CHANGE_CITY(state, payload) {
state.setCity = payload;
}
}
})
//提供对外接口
export default store;
-
组件通过$store.state.isNavShow来获取state中定义的数据
-
如何修改
1. mutations中定义方法,组件可以通过【 this.$store.commit('changeIsShowSupply', true) 】来触发，第二个参数为想传递的数据- action中定义的方法，组件可以通过【$store.dispatch('CHANGE_COUNT_ACT',payload)】来触发，payload是传递的数据
网友评论