vue cli搭建項目及文件引入

cli搭建方法：需安裝nodejs先

　　　1、npm install -g cnpm --registry=https://registry.npm.taobao.org //安裝cnpm,用cnpm下載東西有時會快一些

　　　2、cnpm i -g vue-cli　　 //安裝 vue-cli，i:install 安裝，-g：全局，哪兒都可以使用。

　　　3、vue init webpack-simple ProjectName //webpack-simple:使用webpack-simple模板，projectName：項目名字，隨意寫，它會創建一個ProjectName的文件夾，作為根目錄

　　　4、cd ProjectName //打開新創建的文件夾

　　　5、cnpm install 　　//在跟目錄中安裝依賴。

　　　6、npm run dev 　　// 運行項目，

　　引入文件：

　　　　所有文件引入，都可以放在index.html中按常規方式引入。

　　　　引入 element-ui:

　　　　　　npm i element-ui -D 　　　　　　安裝element-ui模塊
　　　　　　cnpm i style-loader -D 　　　　   配置style-loader 。這個在package.json中，新的文件沒有配置，一定要安裝loader。
　　　　　　import 'element-ui/lib/theme-default/index.css' 　　　　 引入css
　　　　　　import ElementUi from 'element-ui' 　　　　　　　　　　 引入ui模塊
　　　　　　Vue.use(ElementUi) 　　　　　　　　　　　　　　　　　　 使用引入ui模塊。
　　　　　　webpack.config.js　　　　　　　　　　　　　　　　　　　　到官網復制配置代碼，放入webpack.config.js中。

　　　　引入stylus:

　　　　　　cnpm i stylus stylus-loader -D 　　　　安裝stylus 模塊和stylus-loader配置。
　　　　　　webpack.config.js中添加 { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' }

　　　　引入vuex：

　　　　　　cnpm i vuex -D  　　　　　　　　　安裝vuex

　　　　　　import Vuex from 'vuex'　　　　　　直接引入模塊

　　　　　　Vue.use(Vuex)　　　　　　　　　　　　使用模塊
　　　　　　export default new Vuex.Store({}）　　一般store.js文件輸出

　　　　引入animate.css
　　　　cnpm i animate.css --save　　　　　　　　　　　　安裝animate.css
　　　　import animate from 'animate.css 　　　　　　　　 在vue文件中使用

import 引入

　　import aaa from './xxx.vue'  vue文件引入后得到一個組件以及xxx.vue中export default的內容。如果vue文件中：export default{data(){return{t1:'1'}}},則能夠用aaa.data().t1獲取到1。

　　import aaa from ‘./xxx.js’  aaa得到js文件文件中export defualt的內容，還有一大堆原型方法。