VsCode新建VueJs项⽬的详细步骤
本⽂介绍了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        　fu
nctions 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）
cd projectName
// ctrl+c 结束并进⼊⽂件⽬录
npm install
//初始化安装依赖
npm run dev
//最后执⾏
//在浏览器打开localhost:8080，则可以看到欢迎页了。
但是这个只能在本地跑，要如何在我们⾃⼰的服务器上访问呢？
此时需要执⾏：
· npm run build
//会⽣成静态⽂件，在根⽬录的dist⾥，⾥⾯有个index.html，这是服务器访问的路径指定到这⾥就可以访问我们⾃⼰的项⽬了。
注意：淘宝镜像语句，安装后npm速度更快，⽤的时候只需将npm都改成cnpm：
$ npm install -g cnpm –registry=registry.
//or # 建议不要⽤cnpm 安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题
$ npm install –registry=registry.
但是我发现个问题就是⽣成index.html⾥引⽤的css和js的引⽤路径不对，这时候就需要⾃⼰修改⼀下配置了。
进⼊config/index.js
原来的配置的引⽤路径为
我⾃⼰更改为
这样就能正常访问了。
tips:
1、安装npm的⼏种⽅法：
$ npm i 或
$ cnpm i 或
$ npm i cnpm -g （cnpm更快）或
$ npm install -g cnpm --registry=registry. //[镜像⽂件](riny/2014/cnpm/)，提升速度
2、如何更新npm⾄最新版本？
npm install -g npm
//但是，我尝试之后查看npm当前版本
//npm -v
//显⽰的仍然是当前版本。
//npm 还有个命令是 update，于是看了下官⽅⽂档：
//npm update [-g] [<pkg>...]
//于是尝试使⽤该命令：
//npm update -g npm
//之后仍然是⽆效。
最后去 npm 的官⽹
vuejs流程图插件发现使⽤如下命令：
npm install npm@latest -g //可以更新npm⾄最新版本
其中 @ 符号后⾯可以添加你想更新到的版本号。
3、运⾏vue项⽬：
$ npm run dev 或 vsCode 查看集成终端输⼊以上命令
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。