VsCode completes the tutorial of VueJs project

This article mainly introduces the detailed steps of creating a new VueJs project in VsCode. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Use vue-cli to quickly build projects

( vue-cli is the scaffolding of vue.js, used to automatically generate vue.js template projects. Before installing vue-cli, you need to install vue and webpack first)

· 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 ***就可以了。

You will be asked during installation:

①, Project name (sanfeng1); Project name (sanfeng1) . (Press enter to confirm, press N if not)

②、 Project description (A Vue.js project); Project description (A vue.js project). (Feel free to enter a short introduction in English)

③, Author (sunsanfeng); Author (sunsanfeng). (Press enter to confirm, press N if not)

④、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 build (use arrow keys) > Runtime + Compiler: Most users recommend runtime: ~6kb + gzip , but templates (or any Vue specific HTML) are only allowed in . VUE file rendering functionality is required elsewhere. (Press enter)

⑤、Install vue-router? (Y/n)；Installed route? (/N). (You can install it or not, you can install it again later, choose according to your needs)

⑥, Use ESLint to lint your code? (Y/n); Use ESlint syntax? (Y/N). (When using ESLint syntax, you must be mentally prepared. Unless you understand ESLint syntax very well, you will report errors everywhere. I have been driven crazy. I recommend N)

⑦、Setup unit tests with Karma + Mocha? (Y/n);Set up unit tests? (Y/N). (Choose N)

⑧、Setup e2e tests with Nightwatch? (Y/n)；Nightwatch establishes end-to-end tests? (Y/N). (Choose N)

cd projectName
// ctrl+c 结束并进入文件目录               
npm install                   
//初始化安装依赖
npm run dev     
//最后执行
//在浏览器打开http://localhost:8080，则可以看到欢迎页了。

But this can only be run locally. How can we access it on our own server?

You need to execute at this time:

· npm run build
//会生成静态文件，在根目录的dist里，里面有个index.html，这是服务器访问的路径指定到这里就可以访问我们自己的项目了。

Note: Taobao mirror statement, npm is faster after installation. When using it, just change npm to cnpm:

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

//or # 建议不要用cnpm 安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题 
$ npm install –registry=https://registry.npm.taobao.org

But I found a problem that the reference path of css and js referenced in generated index.html is wrong. At this time, I need to modify the configuration myself.

Enter config/index.js

The reference path of the original configuration is

I Change it to

so that you can access it normally.

tips:

1. Several ways to install 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. How to update npm to the latest version ?

npm install -g npm

//但是，我尝试之后 查看npm当前版本
//npm -v
//显示的仍然是当前版本。
//npm 还有个命令是 update， 于是看了下官方文档：
//npm update [-g] [<pkg>...]
//于是尝试使用该命令：
//npm update -g npm
//之后仍然是无效。

Finally go to npm's official website

and find the following command:

npm install npm@latest -g //可以更新npm至最新版本

After the @ symbol, you can add the version number you want to update to.

3. Run the vue project:

$ npm run dev or vsCode View the integrated terminal and enter the above command

Related recommendations:

Detailed examples of VSCode configuration React Native development environment

Detailed examples of vue-cli vscode configuration eslint

Summary and organize VsCode plug-in

The above is the detailed content of VsCode completes the tutorial of VueJs project. For more information, please follow other related articles on the PHP Chinese website!