一、安装环境。
- Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。
- 本机环境:win10 v1903 | node v12.14.0 | npm v6.13.4。
二、进行安装。
- 打开cmd或者PowerShell。
- 输入<npm -v > 查看npm版本,确认npm已安装。
- 输入<npm install -g @vue/cli>全局下载安装vueCli。
- 输入<vue -V>查看vueCli版本,确认vueCli已安装。
三、创建项目。
-
打开cmd或者PowerShell,进入到项目保存位置。
例子:D:\vue\new> -
输入<vue create 项目名>。
例子 vue create abcd -
选择创建模式
default(默认模式,只安装babel(js语法编译器,兼容高版本语法) | eslint(代码检测插件))
Manually select features(自定义模式)。 -
默认模式等待安装完毕,自定义模式:空格(选中/取消),回车(确认,进行下一步)。
*Babel(js语法编译器,兼容高版本语法)
TypeScript(支持TypeScript超集)
Progressive Web App (PWA) Support(渐进式Web应用程序(PWA)支持)
*Router(vue的路由功能)
*Vuex(vue的数据管理仓库)
*CSS Pre-processors(CSS预处理程序支持,less,scss)
*Linter / Formatter(代码检测/格式化插件)
Unit Testing(单元测试插件)
E2E Testing(E2E测试)以上是我的默认配置,下一步。
-
Use history mode for router?(y:使用history路由模式,n:hash路由模式)y
-
Pick a CSS pre-processor(选择css预编译插件) less
-
Pick a linter / formatter config(选择linter / formatter配置) Prettier
-
Pick additional lint features(Lint on save 保存时检查 | Lint and fix on commit 提交时检查)Lint on save
-
Where do you prefer placing config for Babel, ESLint, etc.?(In dedicated config files 配置保存在专用文件 | In package.json 保存在 package.json中)In dedicated config files
-
Save this as a preset for future projects?(把它作为未来项目的预置? y:输入预设名 n:进行安装)
四、 默认指令
- 进入项目文件根目录(有package.json文件)
- 运行< npm run serve>本地启动服务器,浏览器输入http://127.0.0.1:8080查看默认项目(默认8080端口)
- 运行< npm run build>打包项目,静态文件在根目录./dist中,放到web服务器就可以运行了。