[vue學習]快速搭建一個項目

• 安裝node.js

  官網：https://nodejs.org/en/

• 淘寶NPM鏡像（npm是外網，用國內代理下載安裝賊快）

  $ npm install -g cnpm --registry=https://registry.npm.taobao.org

• 全局安裝 vue-cli

  $ cnpm install --global vue-cli

• 建立一個基於 webpack 模板的新項目

  $ vue init webpack my-project

• 在命令行輸出以上的命令後，出現一些項目的初始選項，簡單翻譯以下，根據項目需求配置

 ? Project name my-project  // 項目名稱
 ? Project description A Vue.js project // 項目描述
 ? Author runoob // 做者
 ? Vue build standalone // 項目名稱
 ? Use ESLint to lint your code? Yes // 是否使用ES規範
 ? Pick an ESLint preset Standard // 選擇ESLint預設標準
 ? Setup unit tests with Karma + Mocha? Yes // 使用Karma + Mocha設置單元測試
 ? Setup e2e tests with Nightwatch? Yes // 用夜表設置e2e測試

項目建立好以後，進入項目文件夾根目錄的終端

輸入如下指令

• 安裝依賴

  $ npm install

• 啓動服務

  VUE@2.x：

  $ npm run dev

  VUE@3.x：

  $ npm run serve

 

除了這種方法，還能夠使用編譯器一鍵建立項目

例如：我使用的是Webstorm

新建項目，選擇Vue.js（以Vue@2.x爲例），接下來選擇項目位置、版本等等，一切準備好以後點擊NEXT進行建立。

 

接下來一樣須要進行一些初始配置，是否使用ESlint、是否安裝路由等等......

完成以後進入項目

最後點擊左下角的終端（Terminal），輸入npm install安裝初始依賴，啓動項目和上面的同樣，再也不贅述！

輸入npm run dev，運行項目。

 

 

 

 

打開瀏覽器輸入項目掛載地址

 

 

測試成功！