Build projects quickly with vue-cli
(vue-cli is the scaffolding of vue.js, which is 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 ***就可以了。
During installation you will be asked:
①, Project name (sanfeng1); Project name (sanfeng1). (Press enter to confirm, or N if not)
②, Project description (A Vue.js project); project description (a vue.js project). (Feel free to enter a brief introduction, in English)
③, Author (sunsanfeng); Author (sunsanfeng). (Press enter to confirm, or 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: Recommended runtime for most users: ~6kb limin + 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 routing? (/N). (You can be uneasy, and you can also be safe in the future, 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, or you will report errors everywhere, and I have been driven crazy, I suggest 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 builds end-to-end tests? (Y/N). (Choose N)
|
1
2
3
4
5
6
7
|
cd
projectName
//
ctrl+c 结束并进入文件目录
npm
install
//
初始化安装依赖
npm run dev
//
最后执行
//
在浏览器打开http:
//localhost
:8080，则可以看到欢迎页了。
|
But this can only be run locally, how to access it on our own server?
At this point you need to execute:
|
1
2
|
· npm run build
//会生成静态文件，在根目录的dist里，里面有个index.html，这是服务器访问的路径指定到这里就可以访问我们自己的项目了。
|
Note: Taobao mirror statement, npm is faster after installation, just change npm to cnpm when using it:
|
1
2
3
4
|
$ 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 that the problem is that the reference paths of css and js referenced in index.html are wrong, and then you need to modify the configuration yourself.
Enter config/index.js
The reference path of the original configuration is
I changed myself to
This will allow normal access.
tips:
1. There are several ways to install npm:
|
1
2
3
4
5
|
$ 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?
|
1
2
3
4
5
6
7
8
9
10
|
npm
install
-g npm
//
但是，我尝试之后 查看npm当前版本
//npm
-
v
//
显示的仍然是当前版本。
//npm
还有个命令是 update， 于是看了下官方文档：
//npm
update [-g] [<pkg>...]
//
于是尝试使用该命令：
//npm
update -g npm
//
之后仍然是无效。
|
Finally go to the official website of npm
Found using the following command:
|
1
|
npm
install
npm@latest -g
//
可以更新npm至最新版本
|
The version number you want to update to can be added after the @ symbol.
3. Run the vue project:
$ npm run dev or vsCode to view the integrated terminal and enter the above command