本文主要介紹了VsCode新建VueJs專案的詳細步驟，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。
使用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 ***就可以了。
登入後複製
在安裝時會詢問你:
①、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公司的建立（大多數使用箭頭鍵）> ，但模板（或任何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）
cd projectName
// ctrl+c 结束并进入文件目录
npm install
//初始化安装依赖
npm run dev
//最后执行
//在浏览器打开http://localhost:8080，则可以看到欢迎页了。
登入後複製
但是這個只能在本地跑，要如何在我們自己的伺服器上存取呢？
此時需要執行：
· npm run build
//会生成静态文件，在根目录的dist里，里面有个index.html，这是服务器访问的路径指定到这里就可以访问我们自己的项目了。
登入後複製
注意：淘寶鏡像語句，安裝後npm速度更快，用的時候只需將npm都改成cnpm：
$ npm install -g cnpm –registry=https://registry.npm.taobao.org
//or # 建议不要用cnpm 安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题
$ npm install –registry=https://registry.npm.taobao.org
登入後複製
但是我發現個問題就是產生index.html裡引用的css和js的引用路徑不對，這時候就需要自己修改一下配置了。
進入config/index.js
原來的配置的參考路徑為
我自己改為
這樣就能正常存取了。
tips:
1、安裝npm的幾個方法：
$ npm i 或
$ cnpm i 或
$ npm i cnpm -g （cnpm更快） 或
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
//[镜像文件](http://riny.net/2014/cnpm/)，提升速度
登入後複製
2、如何更新npm至最新版本？
npm install -g npm
//但是，我尝试之后 查看npm当前版本
//npm -v
//显示的仍然是当前版本。
//npm 还有个命令是 update， 于是看了下官方文档：
//npm update [-g] [<pkg>...]
//于是尝试使用该命令：
//npm update -g npm
//之后仍然是无效。
登入後複製
最後去 npm 的官網
發現使用以下指令：
npm install npm@latest -g //可以更新npm至最新版本
登入後複製
其中 @ 符號後面可以加上你想更新到的版本號碼。
3、執行vue專案：
$ npm run dev 或vsCode 查看整合終端機輸入以上指令
相關推薦：
實例詳解VSCode 設定React Native開發環境
實例詳解vue-cli vscode 設定eslint
總結整理VsCode外掛
以上是VsCode完成VueJs專案的教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！
