首頁 >web前端 >js教程 >VsCode完成VueJs專案的教學

VsCode完成VueJs專案的教學

小云云原創: 2018-05-15 14:39:513016瀏覽

本文主要介紹了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完成VueJs專案的教學

相關文章