Vue开发环境的配置

1. 安装Nodejsnpm install nodejs
2. 安装webpacknpm install webpack
3. 安装vue脚手架npm install vue-cli -g

用vue-cli创建模板

• vue-cli的模板分为两套
  • 精简版：vue init webpack-simple 工程名字
  • 常规版：vue init webpack 工程名字
• 初始化设置根据需求来设定，多人开发时开启Project name (vue-test)(语法检测)

安装项目依赖

• npm install 有可能安装速度会很慢可以使用cnpm 安装淘宝镜像npm install -g cnpm

项目启动

• cd进入项目中npm run dev

Vue项目组件的使用

• 组件放在工程目录/src下创建component文件夹,组件都在这个目录下创建使用
• 组件的使用
  1. 引入：import firstcomponent from './component/firstcomponent.vue
  2. 注册：data 代码块后面加上components: { firstcomponent }
  3. 使用：在<template></template>内加上<firstcomponent></firstcomponent>
     

Vue路由

• 安装vue-routernpm install vue-router --save
• 在man.js中导入路由模块import VueRouter from 'vue-router'
• 使用：Vue.use(VueRouter)
• 挂载：new Vue({ el: '#app', router, template: '<App/>', components: { App } })
• 配置项目路由
  1. 在router文件夹的index.js文件中配置
  2. 导入路由模块import Router from 'vue-router'
  3. 引入页面模块:import login from '@/page/login.vue'
  4. 路由的配置：export default new Router({
     routes: [
     {path: '/login',name:'登录',component:login}
     ]
     })
  5. 路由的使用：在视图<template></template>标签中<router-link to='/advert'></router-link>

webpack的配置

• 在config文件夹下的index.js中改变文件打包后指定到的文件夹
  index: path.resolve(__dirname, '../../webapp/index.html'), assetsRoot: path.resolve(__dirname, '../../webapp'), assetsSubDirectory: 'static', assetsPublicPath: '/',
  -dev: {
  port:8888
  }改变文件的端口号

文件打包

• npm run build