Vue开发环境的配置
- 安装Nodejs
npm install nodejs - 安装webpack
npm install webpack - 安装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文件夹,组件都在这个目录下创建使用
- 组件的使用
- 引入：
import firstcomponent from './component/firstcomponent.vue - 注册：data 代码块后面加上
components: { firstcomponent } - 使用：在
<template></template>内加上<firstcomponent></firstcomponent>
- 引入：
Vue路由
- 安装vue-router
npm install vue-router --save - 在man.js中导入路由模块
import VueRouter from 'vue-router' - 使用：
Vue.use(VueRouter) - 挂载：
new Vue({ el: '#app', router, template: '<App/>', components: { App } }) - 配置项目路由
- 在router文件夹的index.js文件中配置
- 导入路由模块
import Router from 'vue-router' - 引入页面模块:
import login from '@/page/login.vue' - 路由的配置：export default new Router({
routes: [
{path: '/login',name:'登录',component:login}
]
}) - 路由的使用：在视图<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
