一項目創建 1，搭建vue-cli腳手架（依賴npm） 沒有安裝npm的同學，請先使用npm install -g vue-cli ，然後再進行這一步 安裝的過程中有幾項 ? Project name p1 //項目名? Project description 1 //描述? Author jims ...
一項目創建
1，搭建vue-cli腳手架（依賴npm）
沒有安裝npm的同學，請先使用npm install -g vue-cli ，然後再進行這一步
安裝的過程中有幾項
? Project name p1 //項目名
? Project description 1 //描述
? Author jimsfriend //作者
? Vue build standalone
? Install vue-router? Yes //是否使用路由（請選擇Yes）
? Use ESLint to lint your code? No //這裡是是否使用嚴格模式，一定要選否，不要問我為什麼，嚴格模式很痛苦！
? Set up unit tests No //這裡隨便
? Setup e2e tests with Nightwatch? No //這裡隨便
然後就是下載依賴包，得等會兒
二 項目結構
1，build:webpack配置文件，可以不用動
2，config,配置文件
dev.env.js看名字叫生產環境.js，沒啥重要的用途，可以不用關註
、
這個也是
比較重要的是config/index.js文件
var path = require('path')
module.exports = {
build: { // production 環境
env: require('./prod.env'), // 使用 config/prod.env.js 中定義的編譯環境
index: path.resolve(__dirname, '../dist/index.html'), // 編譯輸入的 index.html 文件
assetsRoot: path.resolve(__dirname, '../dist'), // 編譯輸出的靜態資源路徑
assetsSubDirectory: 'static', // 編譯輸出的二級目錄
assetsPublicPath: '/', // 編譯發佈的根目錄，可配置為資源伺服器功能變數名稱或 CDN 功能變數名稱
productionSourceMap: true, // 是否開啟 cssSourceMap
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false, // 是否開啟 gzip
productionGzipExtensions: ['js', 'css'] // 需要使用 gzip 壓縮的文件擴展名
},
dev: { // dev 環境
env: require('./dev.env'), // 使用 config/dev.env.js 中定義的編譯環境
port: 8080, // 運行測試頁面的埠
assetsSubDirectory: 'static', // 編譯輸出的二級目錄
assetsPublicPath: '/', // 編譯發佈的根目錄，可配置為資源伺服器功能變數名稱或 CDN 功能變數名稱
proxyTable: {}, // 需要 proxyTable 代理的介面（可跨域）
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false // 是否開啟 cssSourceMap
}
}
這段代碼是抄了園友，更加詳細的原文地址 https://www.cnblogs.com/whkl-m/p/6627864.html
3，dist： 編譯後的打包文件預設是沒有的，
項目編譯打包：
cmd 到project1目錄，運行：npm run build ，然後對多出來一個dist文件，這個dist文件就是編譯後的項目，發佈的時候只需把dist放在 web宿主 （如 IIS）上即可
4，mode_modules，node模塊，就是一些依賴包，
5 ，src，主要編寫代碼文件，後面會單獨介紹
6，static，也是靜態文件存放文件
7，剩下的都是寫不怎麼重要的，省略了。
二 項目運行,進入project1 目錄 在cmd中運行 npm run dev 回車即可
然後就運行起來,訪問 http://localhost:8080/
三 安裝iview，
也是project1目錄下，運行 npm install iview --save
裝好之後基本上依賴項和環境就Ok，然後就開幹了
Iview的文檔地址 http://v1.iviewui.com/docs/guide/install，一定要註意版本，不同的版本api不同
先瞭解一下src的項目結構
assets，放一些靜態文件，比如圖片圖標啥的
components ， 存放組件 ，理解為抽取出來的一些公共的自定義組件
js，這個是我自己新建的文件夾放一些公共的js文件比如 用axios粉裝的Http請求 ， 常用的工具類等等
router ，裡面有一個index.js 文件，是路由文件 。就像ASPNET MVC 中的路由表，只不過他是顯式的定義出來，而mvc中預設使用ctroller首碼和action名作為路由。
views文件夾，放主要的頁面，代碼量最多的地方
App.vue,入口的組件
main.js入口文件
清楚之後，我們來寫一個登錄頁
先搞一個_layout文件放佈局頁，是不是和mvc裡面的_layout很像？沒錯他們都是一個意思
這裡的<router-view></router-view> 和mvc中的RendBody()是一個意思
然後搞 account文件夾，來放登陸註冊這種頁面 ，搞一個login.vue文件，就是登錄頁了
搞完之後就去訪問 /account/login,你會發現啥都沒有，因為還沒有再router/index.js裡面定義
,定義一個 account_login ，名字隨便起 from後面是文件夾的路徑
，下麵的path是在瀏覽器中訪問的地址
再次訪問，已經有了
，寫不動了，今天先寫這麼多，下一節寫路由的使用
