安裝淘寶鏡像就是為了快速的安裝npm包。(網速不好的建議使用)
全局安裝
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝腳手架
cnpm install vue-cli
建立項目
vue init webpack myapp
? Project name myapp (起項目名字)
? Project description A Vue.js project (描述Vue.js項目)
? Author (作者)
? Vue build (Vue建構)--standalone
? Install vue-router? (是否安裝vue-router)--Yes
? Use ESLint to lint your code? (是否使用ESLint來驗證我們的文法)--Yes
? Pick an ESLint preset (使用哪種文法規範來檢查我們的代碼)--standard
選項有三個
1.standard(https://github.com/feross/standard) js的标準風格
2.Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法,這個github位址說是JavaScript最合理的方法
3.none (configure it yourself) 自己配置
? Set up unit tests (是否安裝單元測試) --Yes
? Pick a test runner (選擇一個單元測試運作器) --karma
選項有三個
1.Jest(Jest是由Facebook釋出的開源的、基于Jasmine的JavaScript單元測試架構)
2.Karma and Mocha
3.none
? Setup e2e tests with Nightwatch? (是否安裝E2E測試架構NightWatch (e2e,也就是End To End,就是所謂的“使用者真實場景”)--Yes
? Should we run `npm install` for you after the project has been created? (recommended)
(譯:項目建立後是否要為你運作“npm install”?這裡選擇包管理工具) --no
選項有三個
yes,use npm(使用npm)
yes,use yarn(使用yarn)
no,I will handle that myself(自己操作)
--是作者自己本人的操作
安裝依賴并且運作
cd myapp
cnpm run dev
顯示以上說明啟動成功 根據http://localhost:8080 就能進入你的vue項目了!!!!
熟悉項目檔案
build --- 項目的配置檔案(項目打包、版本檢測、工具、webpack的配置- 基礎配置、開發配置、生産配置、測試配置)
build/webpack.base.conf.js (43行關閉文法校驗)
config -- 基于webpack的選項的抽離配置
node_modules -- 安裝的依賴
src --- 項目開發的主場
static -- 代碼帶包會給其内部添加css檔案和js檔案
test --- 測試的代碼
.babelrc -- 進階js的預設檔案
.editorconfig -- 編輯器配置檔案
.eslintignore -- 驗證代碼的忽略檔案 --- 哪些檔案不需要去驗證代碼 添加/node_modules/
eslintrc.js -- 驗證配置檔案
.gitignore -- 使用git上傳時的忽略檔案
.postcssrc.js -- css的一些配置
index.html --- 首頁面
package.json --- 項目的描述檔案
README.md
熟悉src檔案
assets ------- 放置靜态資源檔案
components ------- 自定義的元件
router ------- 路由
App.vue ------- 最大的那個元件
main.js ------- 入口檔案
熟悉build檔案
config/index.js (13行配置代理伺服器解決跨域問題)
安裝axios
npm install axios
安裝Sass
npm install vue-loader --save-dev
npm install sass-loader node-sass --save-dev
安裝Vuex
npm install vuex --save