使用VSCode建立一個Vue項目

vue-cli 是vue.js的腳手架，用於自動生成vue.js模板工程的。 安裝vue-cli以前，須要先安裝了vue和webpack

· node -v       　　　　　　　　　　  //(版本低引發：bash: npm: command not found) 

· npm -v   　　　　　　　　　　　　  　 //以上幫助檢查是否安裝 node npm　　　　　　

· 輸入vue     　　　　　　　　　 　    //測試vue是否安裝成功

· 輸入vue list   　　　　　　　　　　  //看vue中有哪些子類 npm install vue

· npm  install  -g vue-cli            // 全局安裝vue-cli

·  vue init webpack projectName      // 生成項目名爲projectName的模板，這裏的項目名projectName隨你本身寫 （是的話 敲回車就行）

　　　　　　　　　　　　　　　　　　　　　// 默認狀況下，webpack安裝的是最新版本的，若是要安裝其餘版本，使用命令行vue init webpack #1.0 ***就能夠了。

在安裝時會詢問你: 

①、Project name (sanfeng1)；項目名稱（sanfeng1）。（肯定按enter，否按N） 

②、 Project description (A Vue.js project)；項目描述（一vue.js項目）。（隨意輸入一段簡短介紹，用英文） 

③、Author (sunsanfeng)；做者（sunsanfeng）。（肯定按enter，否按N） 

④、Vue build (Use arrow keys)> Runtime + Compiler: recommended for most usersRuntime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render 　　　　　　　　functions are required elsewhere；Vue公司的創建（使用箭頭鍵）>運行時+編譯器：大多數用戶推薦運行時間：約6kb輕民+ gzip，但模板（或任何Vue具體HTML）只容許在。VUE文件渲染功能是必需的其餘地方。（按enter） 

⑤、Install vue-router? (Y/n)；安裝的路由？（/ N）。（可安可不安，之後也能夠再安，根據需求選擇） 

⑥、Use ESLint to lint your code? (Y/n)；使用ESlint語法？（Y/ N）。（使用ESLint語法，就要作好心理準備，除非你很是懂ESLint語法，要不就會到處報錯，我就被逼瘋過，建議N） 

⑦、Setup unit tests with Karma + Mocha? (Y/n)；設置單元測試？（Y / N）。（選N） 

⑧、Setup e2e tests with Nightwatch? (Y/n)；Nightwatch創建端到端的測試？（Y / N）。（選N）

 

此時會生成一個 projectName 的文件夾，這個文件夾就是vue的項目模板

· cd  projectName         // 進入文件目錄              

· npm  install                    // 初始化安裝依賴

· npm run dev   　　　　  //運行， 在瀏覽器打開http: //localhost :8080，則能夠看到歡迎頁了。

　　

 

 

可是這個只能在本地跑，要如何在咱們本身的服務器上訪問呢？

· npm run build 

 

會生成靜態文件，在根目錄的dist裏，裏面有個index.html，這是服務器訪問的路徑指定到這裏就能夠訪問咱們本身的項目了。

模板默認是run build 命令，若是提示沒有找到命令就須要去配置文件裏尋找build指令

有時候生成的index.html裏引用的css和js的引用路徑不對，這時候就須要本身修改一下。 例如改成：config/index.js 

tips:

一、如何更新npm至最新版本？

npm install npm @latest -g //能夠更新npm至最新版本

其中 @ 符號後面能夠添加你想更新到的版本號。

 

二、安裝淘寶npm

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

//or  # 建議不要用cnpm 安裝有各類詭異的bug 能夠經過以下操做解決npm速度慢的問題 

$ npm  install  –registry=https: //registry .npm.taobao.org

 

三、要使用 <style lang="sass"> 請安裝組件

$ npm install sass-loader node-sass vue-style-loader --D

原文出處：https://www.cnblogs.com/bob-zb/p/11152562.html