vue入門|ElementUI使用指南
1.開發前務必熟悉的文檔：
vue.js2.0中文,項目所使用的js框架 vue-router,vue.js配套路由 vuex 狀態管理 Element UI框架
2.構建項目框架
全局安裝腳手架環境 npm install -g vue-cli 創建一個基於webpack模板項目my-project vue init webpack my-project 進入項目 cd my-project 安裝依賴 npm install 啟動項目 npm run dev
備注：vue init 再3.x以后建議用vue create，請參考https://cli.vuejs.org/zh/guide/creating-a-project.html#%E6%8B%89%E5%8F%96-2-x-%E6%A8%A1%E6%9D%BF-%E6%97%A7%E7%89%88%E6%9C%AC
Vue CLI >= 3 和舊版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的 vue init 功能，你可以全局安裝一個橋接工具：
npm install -g @vue/cli-init # `vue init` 的運行效果將會跟 `vue-cli@2.x` 相同 vue init webpack my-project
3.運行項目之后看到下面界面，說明安裝成功
說下項目結構：
Vue項目結構圖：
簡單介紹目錄結構
build目錄是一些webpack的文件，配置參數什么的，一般不用動 config是vue項目的基本配置文件 node_modules是項目中安裝的依賴模塊 src源碼文件夾，基本上文件都應該放在這里。
—assets 資源文件夾，里面放一些靜態資源
—components這里放的都是各個組件文件
—App.vue App.vue組件
—main.js入口文件 static生成好的文件會放在這個目錄下。 .babelrc babel編譯參數，vue開發需要babel編譯 .editorconfig 看名字是編輯器配置文件，不曉得是哪款編輯器，沒有使用過。 .gitignore 用來過濾一些版本控制的文件，比如node_modules文件夾 index.html 主頁 package.json 項目文件，記載着一些命令和依賴還有簡要的項目描述信息 README.md 介紹自己這個項目的，想怎么寫怎么寫。不會寫就參照github上star多的項目，看人家怎么寫的
我混淆不清楚的幾個文件
1.index.html
主頁我們可以像平時普通的html文件一樣引入文件和書寫基本信息，添加meta標簽等。
2.main.js
這里是入口文件，主要作用是初始化vue實例並使用需要的插件。
import Vue from 'vue' import App from './App' import router from './router' /* eslint-disable no-new */ new Vue({ el: '#app', template: '<App/>', components: { App } })
3.App.vue
這是一個標准的vue組件，包含三個部分，一個是模板，一個是script，一個是樣式，這里需要了解vue的基礎。
<template> <div id="app"> <img src="./assets/logo.png"> <hello></hello> </div> </template> <script> import Hello from './components/Hello' export default { name: 'app', components: { Hello } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
在webpack的配置文件里，設置了main.js是入口文件，我們的項目默認訪問index.html，這個文件里面<div id="app"></div>和App.vue組件里面的容器完美的重合了，也就是把組件掛載到了index頁面，然后我們只需要去建設其他組件就好了，在App組件中我們也可以引入，注冊，應用其他組件，后面我會介紹如何通過路由將其他組件渲染在App組件，這樣我們就只需要去關注每個組件的功能完善。
就是說vue的默認頁面是index.html，index中的<div id="app"></div>掛載了App.vue這個大組件，然后所有的其他子組件（hello.vue等）都歸屬在App.vue這個主組件下。
main.js 是入口文件，作用是初始化vue實例並使用需要的插件（router等）。
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
4.安裝element-ui
npm install element-ui -S
S代表save 安裝到本地開發者環境中
檢查一下package.json看看是否安裝成功，如果有element-ui 表示安裝成功
5.導入element-ui
import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)//全局使用ElementUI
如果沒報錯的話，就可以正常使用啦
6.接下來我們就可以參照Element的官方文檔上手開發了
demo:
我們只需要改動HelloWorld.vue的內容
<template> <div class="hello"> <h1>{{ msg }}</h1> <el-progress type="circle" :percentage="0"></el-progress> <el-progress type="circle" :percentage="25"></el-progress> <el-progress type="circle" :percentage="100" status="success"></el-progress> <el-progress type="circle" :percentage="50" status="exception"></el-progress> </div> </template> <script> export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App', } } } </script>
效果如下圖所示：
vue項目打包步驟
終端運行命令 npm run build
打包成功的標志與項目的改變，如下圖：
點擊index.html，通過瀏覽器運行，出現以下報錯，如圖：
那么應該如何修改呢？
具體步驟如下：
1、查看package.js文件的scripts命令
2、打開webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl點擊，跳轉到index.js文件
3、其中dev是開發環境，build是構建版本，找到build下面的assetsPublicPath: '/',然后修改為assetsPublicPath: './',即“/”前加點。
4、終端運行 npm run build 即可。
此時點擊index.html，通過瀏覽器運行便，會發現動態綁定的static的圖片找不到，故static必須使用絕對路徑。將圖片路徑修改為絕對路徑，至此，打包完成。
可以參考，有些css樣式里面路徑存在問題https://www.cnblogs.com/goloving/p/8904545.html
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
vue-cli + webpack 多頁面實例應用
關於vue.js
vue.js是一套構建用戶界面的 輕型的漸進式前端框架。它的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。使用vue可以給你的開發帶來極致的編程體驗。
關於vue-cli
Vue-cli是vue官方提供的一個命令行工具（vue-cli），可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需一分鍾即可啟動帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目。
疑問
vue-cli主要是用於構建單頁應用的腳手架，但是現實項目中，大部分項目都是多頁的，怎么樣可以很好的利用這一套官方配置呢？我在網上找了一下， 幾乎找不到vue多頁應用實例，所以才有基於vue-cli生成的單頁應用進行改造。
代碼地址：
Github：https://github.com/breezefeng/vue-cli-multipage，大家要是覺得好用就給一個star支持下吧~
使用方法
# install dependencies npm install # serve with hot reload at localhost:8080/module/index.html npm run dev # build for production with minification npm run build
目錄結構
vue-cli-multipage |---build |---config |---src |---assets |---img 圖片文件 |---css 樣式文件 |---font 字體文件 |---components 組件 |---Button.vue 按鈕組件 |---Hello.vue |---module |---index 首頁模塊 |---index.html |---index.js |---App.vue |---detail 詳情頁模塊 |---detail.html |---detail.js |---App.vue
從目錄結構上，各種組件、頁面模塊、資源等都按類新建了文件夾，方便我們儲存文件。
其實我們所有的文件，最主要都是放在module文件夾里，以文件夾名為html的名稱。
例如：
|---index 首頁模塊 |---index.html |---index.js |---App.vue
此時我們訪問的鏈接是：
http://localhost:8080/module/index.html
這里一定要注意，在module里下級文件夾里需要將html，js，vue template 都統一放在當前文件夾里，當然你也可以繼續放其他的資源，例如css、圖片、組件等，webpack會打包到當前頁面里。
如果項目不需要這個頁面了，可以把這個文件夾直接刪除掉，干凈利落，干活也開心。
像以前傳統的開發項目，所有的圖片都習慣放在images里，當項目有改動時，有些圖片等資源用不上了，但還占着坑位，導致項目越來越大，雖然現在的硬件容量大到驚人，但我們應該還是要養到一個良好的習慣。
組件的使用
組件（Component）是 vue.js 最強大的功能之一，當你發現使用組件可以減少造輪子里，你會深深的愛上它。
我們的組件都是放在components目錄下的，調用組件的方法也很簡單。
import Hello from 'components/Hello'
然后記得在*.vue注冊導入的組件，要不然會無法使用。
import Hello from 'components/Hello' export default { name: 'app', components: { //在這里注冊組件，不然無法使用 Hello } }
構建代碼說明
那我們使用的是vue-cli的手腳架，用過vue-cli的同學都知道構建代碼是放在根目錄build下，vue多頁面主要修改了這三個JS文件：webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js。
/** ** [webpack.base.conf.js]這里主要列出相關代碼的修改點，具體代碼請看build/webpack.base.conf.js */ var entries = getEntry('./src/module/**/*.js'); // 獲得入口js文件 module.exports = { entry: entries, .... } function getEntry(globPath) { var entries = {}, basename, tmp, pathname; glob.sync(globPath).forEach(function (entry) { basename = path.basename(entry, path.extname(entry)); tmp = entry.split('/').splice(-3); pathname = tmp.splice(0, 1) + '/' + basename; // 正確輸出js和html的路徑 entries[pathname] = entry; }); return entries; }
/** ** [webpack.prod.conf.js]這里主要列出相關代碼的修改點，具體代碼請看build/webpack.base.prod.js */ function getEntry(globPath) { var entries = {}, basename, tmp, pathname; glob.sync(globPath).forEach(function (entry) { basename = path.basename(entry, path.extname(entry)); tmp = entry.split('/').splice(-3); pathname = tmp.splice(0, 1) + '/' + basename; // 正確輸出js和html的路徑 entries[pathname] = entry; }); return entries; } var pages = getEntry('./src/module/**/*.html'); for (var pathname in pages) { // 配置生成的html文件，定義路徑等 var conf = { filename: pathname + '.html', template: pages[pathname], // 模板路徑 inject: true, // js插入位置 minify: { //removeComments: true, //collapseWhitespace: true, //removeAttributeQuotes: true }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency' }; if (pathname in module.exports.entry) { conf.chunks = ['manifest', 'vendor', pathname]; conf.hash = true; } module.exports.plugins.push(new HtmlWebpackPlugin(conf)); }