Vue項目腳手架搭建

安裝淘寶鏡像就是爲了快速的安裝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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章