略过。网上资料很多,不搬运了。
npm install -g @vue/cli
注意以下命令是错误的!
npm install -g vue npm install -g vue-cli
这个和以前的安装命令是不一样的,估计是要和以前的vue-cli做区别。 如果安装了以前的版本,建议先卸载
npm uninstall -g vue-cli
安装成功后,我们即可使用 vue 命令,测试方法:(查看版本)
$ vue -V @vue/cli 4.5.4 (目前的版本号,估计还会不断更新)
vue create vue-test
以前用 init 创建项目,现在改成create,感觉更正规了。 安装过程会出现各种选项,按照自己的需求选择即可。
Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) Manually select features (手动选择功能)
我们选择 Manually select features
Vue CLI v4.5.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: () Choose Vue version (选择Vue版本,后面可以选择2.0或者3.0。不勾选的话就默认2.0) () Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support (渐进式Web应用程序(PWA)支持) ( ) Router (安装路由) ( ) Vuex (安装状态管理) ( ) CSS Pre-processors (*) Linter / Formatter ( ) Unit Testing (单元测试) ( ) E2E Testing ()
选择路由和状态管理,如果需要其他的也可以选择
Babel 是啥? javascript在不断的发展,各种新的标准和提案层出不穷,但是由于浏览器的多样性,导致可能几年之内都无法广泛普及,babel可以让你提前使用这些语言特性,他是一种用途很多的javascript编译器,他把最新版的javascript编译成当下可以执行的版本,简言之,利用babel就可以让我们在当前的项目中随意的使用这些新最新的es6,甚至es7的语法。说白了就是把各种javascript千奇百怪的语言统统专为浏览器可以认识的语言。
好吧我也不太懂。
? Choose a version of Vue.js that you want to start the project with 2.x 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less Stylus
选择第二个
ESLint with error prevention only (仅具有错误预防功能的ESLint) ESLint + Airbnb config (ESLint+Airbnb配置) ESLint + Standard config (ESLint+标准配置) ESLint + Prettier (ESLint+更漂亮)
第一个基本不管,可以随意写。 第二个不是的是哪个配置。 第三个吧,标准一点就好。 第四个是最严格的的,甚至要求换行和空格。(如果和自己过不去的话,建议选这个)
Pick additional lint features: (*) Lint on save ( ) Lint and fix on commit (requires Git)
Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) In dedicated config files In package.json
Save this as a preset for future projects? (y/N)
如果下次创建项目还是这么选择的话,可以把这个保存为模板,下次直接使用。
? Save preset as: 给模板起名字
然后就是疯狂的安装过程了。需要联网下载各种需要的文件,同时在本地创建项目。
cd vue-test (进入项目文件夹) npm run serve (运行项目,测试环境)
这个就是调用node编写的服务器,运行我们的项目,这个是开发环境,还是非常方便的。如果是第一次使用的话,可能会不太习惯,不过没关系,习惯就好。
成功运行后,会出现下面这个页面
DONE Compiled successfully in 6946ms 下午3:09:09 App running at:
在浏览器里输入上面的网址就可以查看我们的项目了。
如果是Windows环境的话,每次都要敲命令行,太麻烦了,我们可以使用批处理bat文件来简化操作。 建立一个记事本文件,扩展名改成.bat。然后输入一下命令
npm run serve pause
其他命令可以自行百度。 当然如果你使用的编辑器带有运行项目的功能的话,就可以略过上面这一条。