時(shí)代的發(fā)展，前端開發(fā)也越來越復(fù)雜化，從簡(jiǎn)單的切圖到如今的全棧攻城獅！我們也需要不斷進(jìn)步跟上時(shí)代的腳步，如今最火的vue框架使用，今天給大家分享一下vue腳手架的使用方法！
先說一下vue的特點(diǎn):
輕 小? 易用? 性能高? 數(shù)據(jù)雙向綁定? 組件化
這幾點(diǎn)是我總結(jié)的就不一一具體說明了。
下面給大家介紹具體的使用方法:
開發(fā)環(huán)境
nodejs
npm webpack
vue的組件都是通過.vue文件來實(shí)現(xiàn)，這些文件無法被瀏覽器解析的，需要webpack
vue-cli 腳手架:
用來生成vue的模板（架子），相當(dāng)于按照設(shè)計(jì)圖搭建好房子的架子。
開發(fā)步驟
1、下載node
2、下載webpack
npm install webpack -g
3、安裝腳手架npm install vue-cli -g
4、根據(jù)模板創(chuàng)建項(xiàng)目
simple 完全沒用
webpack-simple 用他
webpack 有校驗(yàn)
browserify-simple
browserify找到文件夾進(jìn)去
vue init <模板的名稱> 工程的名稱（不用用中文）
如果需要1.0? vue init webpack-simple[#1.0]
webpack-simple-demo
項(xiàng)目名稱，項(xiàng)目描述，作者，是否用sass
5、進(jìn)入項(xiàng)目文件夾
6、npm install下載依賴項(xiàng)（各種loader)
因?yàn)槲募?vue結(jié)尾的瀏覽器不認(rèn)識(shí)需要loder進(jìn)行解析。
7、安裝路由和交互
npm install vue-router vue-resource --save
8、啟動(dòng)項(xiàng)目npm run dev
以上就是項(xiàng)目的創(chuàng)建！
編寫項(xiàng)目
編寫項(xiàng)目? ? ? ? App.vue 主文件? ? ? ??
所有的html寫在 template? ? ? ? ? ??
模板里面必須有一個(gè)根文件? ? ? ??
所有的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、再準(zhǔn)備一些組件
3、修改main.js(入口文件)
a）引入路由文件
import VueRouter from 'vue-router'
b)開啟路由
Vue.use(VueRouter);
c)寫模板，或者是引入模板 const First={template:'<div>我是第一個(gè)模板</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>
項(xiàng)目打包:
npm run build
會(huì)生成一個(gè)文件dist文件
上線:
上線要用dist文件
注：可能會(huì)因?yàn)閘oader不全報(bào)錯(cuò)只要再重新下載loader就可以了
