開發(fā)環(huán)境搭建
node.js
環(huán)境
在官方下載地址下載對應版本的安裝包爸邢。
安裝淘寶npm
鏡像
npm
為node.js
使用的包依賴管理器,由于天朝的某些限制,依賴下載比較慢肘习,可以選擇使用淘寶npm
鏡像凶伙。
npm install -g cnpm --registry=https://registry.npm.taobao.org
vue命令行工具vue-cli
介紹
安裝
npm install -g vue-cli
創(chuàng)建一個新的vue項目腳手架
vue init <template-name> <project-name>
例如:
vue init webpack my-project
新建vue項目
搭建并運行
$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev
項目目錄結(jié)構(gòu)介紹
.
├── build/ # webpack 配置文件
│ └── ...
├── config/
│ ├── index.js # 主要項目配置
│ └── ...
├── src/
│ ├── main.js # app 入口文件
│ ├── App.vue # 主要 app 組件
│ ├── components/ # ui 公共組件
│ │ └── ...
│ └── views/ # 視圖頁面(自己添加的)
│ │ ├── ... # 視圖文件夾
│ │ | ├── js/
│ │ | ├── css/
│ │ | └── *.vue
│ │ ├── js/ # 主要視圖js
│ │ ├── css/ # 主要視圖css
│ │ └── Main.vue # 主要視圖
│ └── assets/ # 靜態(tài)資源文件蹋宦,包括字體、圖片等 (processed by webpack)
│ └── ...
├── static/ # 純粹的靜態(tài)資源文件 (directly copied)
├── test/
│ └── unit/ # unit tests
│ │ ├── specs/ # test spec files
│ │ ├── eslintrc # config file for eslint with extra settings only for unit tests
│ │ ├── index.js # test build entry file
│ │ ├── jest.conf.js # Config file when using Jest for unit tests
│ │ └── karma.conf.js # test runner config file when using Karma for unit tests
│ │ ├── setup.js # file that runs before Jest runs your unit tests
│ └── e2e/ # e2e tests
│ │ ├── specs/ # test spec files
│ │ ├── custom-assertions/ # custom assertions for e2e tests
│ │ ├── runner.js # test runner script
│ │ └── nightwatch.conf.js # test runner config file
├── .babelrc # babel config
├── .editorconfig # indentation, spaces/tabs and similar settings for your editor
├── .eslintrc.js # eslint config
├── .eslintignore # eslint ignore rules
├── .gitignore # sensible defaults for gitignore
├── .postcssrc.js # postcss config
├── index.html # index.html 模板脖含,編譯打包的結(jié)果會注入到這里
├── package.json # 構(gòu)建腳本和依賴
└── README.md # Default README file
構(gòu)建命令介紹
npm run dev :啟動一個本地
node.js
服務器豁翎,編譯并運行該單頁面應用角骤。npm run build: 構(gòu)建該單頁面應用,構(gòu)建結(jié)果保存在
./dist
目錄下npm run unit: 運行單元測試
npm run e2e: 運行端到端測試