1.開發前務必熟悉的文檔:css
vue.js2.0中文,項目所使用的js框架 vue-router,vue.js配套路由 vuex 狀態管理 Element UI框架
2.構建項目框架html
全局安裝腳手架環境 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
功能,你能夠全局安裝一個橋接工具:vue
npm install -g @vue/cli-init # `vue init` 的運行效果將會跟 `vue-cli@2.x` 相同 vue init webpack my-project
3.運行項目以後看到下面界面,說明安裝成功node
說下項目結構:webpack
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多的項目,看人家怎麼寫的git
1.index.html
主頁咱們能夠像平時普通的html文件同樣引入文件和書寫基本信息,添加meta標籤等。github
2.main.js
這裏是入口文件,主要做用是初始化vue實例並使用須要的插件。web
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的基礎。vuex
<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>
效果以下圖所示:
終端運行命令 npm run build
打包成功的標誌與項目的改變,以下圖:
點擊index.html,經過瀏覽器運行,出現如下報錯,如圖:
那麼應該如何修改呢?
具體步驟以下:
一、查看package.js文件的scripts命令
二、打開webpack.dev.conf.js文件,找到publicPath: config.dev.assetsPublicPath,按Ctrl點擊,跳轉到index.js文件
三、其中dev是開發環境,build是構建版本,找到build下面的assetsPublicPath: '/',而後修改成assetsPublicPath: './',即「/」前加點。
四、終端運行 npm run build 便可。
此時點擊index.html,經過瀏覽器運行便,會發現動態綁定的static的圖片找不到,故static必須使用絕對路徑。將圖片路徑修改成絕對路徑,至此,打包完成。
能夠參考,有些css樣式裏面路徑存在問題http://www.javashuo.com/article/p-thmquqdr-z.html
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
vue.js是一套構建用戶界面的 輕型的漸進式前端框架。它的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。使用vue能夠給你的開發帶來極致的編程體驗。
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)); }