時代的發(fā)展柴钻，前端開發(fā)也越來越復(fù)雜化，從簡單的切圖到如今的全棧攻城獅货葬！我們也需要不斷進步跟上時代的腳步采幌，如今最火的vue框架使用，今天給大家分享一下vue腳手架的使用方法宝惰！
先說一下vue的特點:
輕 小? 易用? 性能高? 數(shù)據(jù)雙向綁定? 組件化
這幾點是我總結(jié)的就不一一具體說明了植榕。
下面給大家介紹具體的使用方法:
開發(fā)環(huán)境
nodejs
npm webpack
vue的組件都是通過.vue文件來實現(xiàn)再沧，這些文件無法被瀏覽器解析的尼夺，需要webpack
vue-cli 腳手架:
用來生成vue的模板（架子），相當(dāng)于按照設(shè)計圖搭建好房子的架子炒瘸。
開發(fā)步驟
1淤堵、下載node
2、下載webpack
npm install webpack -g
3顷扩、安裝腳手架npm install vue-cli -g
4拐邪、根據(jù)模板創(chuàng)建項目
simple 完全沒用
webpack-simple 用他
webpack 有校驗
browserify-simple
browserify找到文件夾進去
vue init <模板的名稱> 工程的名稱（不用用中文）
如果需要1.0? vue init webpack-simple[#1.0]
webpack-simple-demo
項目名稱，項目描述隘截，作者扎阶，是否用sass
5、進入項目文件夾
6婶芭、npm install下載依賴項（各種loader)
因為文件是.vue結(jié)尾的瀏覽器不認識需要loder進行解析东臀。
7、安裝路由和交互
npm install vue-router vue-resource --save
8犀农、啟動項目npm run dev
以上就是項目的創(chuàng)建惰赋！
編寫項目
編寫項目? ? ? ? App.vue 主文件? ? ? ??
所有的html寫在 template? ? ? ? ? ??
模板里面必須有一個根文件? ? ? ??
所有的js export default {
name: 'app',
data () {return {msg: 'Welcome to Your Vue.js App'}},methods:{}}
數(shù)據(jù)必須放在函數(shù)的返回值中
組件的寫法
1、創(chuàng)建文件 .vue結(jié)尾
2呵哨、寫文件
<template>
寫HTML
</template>
export default {data(){return {}},methods:{}}
<style>
寫樣式
</style>
3赁濒、在主組件中引用? ? ??
a)import XXX from ‘上面創(chuàng)建的文件的路徑’? ? ? ?
?b)掛在js里 data(){}, ?components:{XXX}? ? ? ??
c)在template里面用<xxx><xxx>
路由
1轨奄、修改文件
找到webpack.config.js
看有沒有
resolve: {alias: {'vue$': 'vue/dist/vue.esm.js'}}
如果沒有
resolve: {alias: {'vue':'vue/dist/vue.js'}}
2、再準備一些組件
3拒炎、修改main.js(入口文件)
a）引入路由文件
import VueRouter from 'vue-router'
b)開啟路由
Vue.use(VueRouter);
c)寫模板挪拟，或者是引入模板 const First={template:'<div>我是第一個模板</div>'};
import second from './component/second.vue';
d)配置路由
const router=new VueRouter({
routes:[{path:'/first',component:First},{path:'/second',component:second}]
})
e)在vue中把路由掛載上
new Vue({router,el: '#app',render: h => h(App)})
f)在主模板中寫路由的按鈕和展示
<router-link to="/first">111</router-link>
<router-link to="/second">111</router-link>
<router-view></router-view>
項目打包:
npm run build
會生成一個文件dist文件
上線:
上線要用dist文件
注：可能會因為loader不全報錯只要再重新下載loader就可以了
