Vue開發(fā)環(huán)境的配置
- 安裝Nodejs
npm install nodejs - 安裝webpack
npm install webpack - 安裝vue腳手架
npm install vue-cli -g
用vue-cli創(chuàng)建模板
- vue-cli的模板分為兩套
- 精簡版：vue init webpack-simple 工程名字
- 常規(guī)版：vue init webpack 工程名字
- 初始化設(shè)置根據(jù)需求來設(shè)定筝尾，多人開發(fā)時開啟Project name (vue-test)(語法檢測)
安裝項目依賴
- npm install 有可能安裝速度會很慢可以使用cnpm 安裝淘寶鏡像
npm install -g cnpm
項目啟動
- cd進(jìn)入項目中
npm run dev
Vue項目組件的使用
- 組件放在工程目錄/src下創(chuàng)建component文件夾,組件都在這個目錄下創(chuàng)建使用
- 組件的使用
- 引入：
import firstcomponent from './component/firstcomponent.vue - 注冊：data 代碼塊后面加上
components: { firstcomponent } - 使用：在
<template></template>內(nèi)加上<firstcomponent></firstcomponent>
- 引入：
Vue路由
- 安裝vue-router
npm install vue-router --save - 在man.js中導(dǎo)入路由模塊
import VueRouter from 'vue-router' - 使用：
Vue.use(VueRouter) - 掛載：
new Vue({ el: '#app', router, template: '<App/>', components: { App } }) - 配置項目路由
- 在router文件夾的index.js文件中配置
- 導(dǎo)入路由模塊
import Router from 'vue-router' - 引入頁面模塊:
import login from '@/page/login.vue' - 路由的配置：export default new Router({
routes: [
{path: '/login',name:'登錄',component:login}
]
}) - 路由的使用：在視圖<template></template>標(biāo)簽中<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
