VS Code作項目的筆記

須要本身研究的東西：http://www.bootcss.com/

畫頁面時的佈局插件：http://blog.chinaunix.net/uid-22414998-id-2878529.html

 

 

vsCode用lic建立項目：https://www.cnblogs.com/z45281625/p/9015380.html

使用vue-cli快速構建項目 

 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 ***就能夠了。

 

注意：淘寶鏡像語句，安裝後npm速度更快，用的時候將npm都改爲cnpm　　　　　　　　　　　　　　　

在安裝時會詢問你: 

①、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 

 

 

此處運行報錯  由於上面的建立項目的方式是vue-cli2.0的方式   沒法用cnpm run serve指令來運行

（因此後來者若是看到我這篇博客  請前往官網查找新建項目方法  別百度）

怎樣升級本身的vue-cli版本

最近我用vue建立項目的時候報了一個我vue版本太低的錯誤，我本地是2.6,而最新的版本是2.8.1，而後在網上找升級vue版本的方法，找了很久都找不到，因此記錄一下方便別的小朋友。

npm install --global vue-cli     或者使用cnpm這樣快一些

或者使用 cnpm install --global vue-cli 也是能夠的

這樣全局安裝 vue-cli一下，npm就會把你vue的版本提高到最新版本