Vue技术点整理-Vue CLI安装详解
一,脚手架安装
Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
1,全局安装Vue CLI
npm install -g @vue/cli # OR yarn global add @vue/cli
安装之后,使用以下命令查看安装是否正确
vue --version
2,快速创建一个CLI项目
vue create cli_test
此时会出现以下安装选项:
- 选择安装选项
PS E:\workspace\demo> vue create cli_test Vue CLI v3.9.2 ? Please pick a preset: useLessDefault (vue-router, vuex, less, babel, eslint) //上一次我保存的默认配置,第一次是没有的 default (babel, eslint) //默认配置创建 > Manually select features //自定义配置选项,建议选择
- 选择安装插件
注:按上、下健切换选项,按空格键选择选项,按i键反选
Vue CLI v3.9.2 ? Please pick a preset: Manually select features ? Check the features needed for your project: (Press <space> to select, <a> to t ? Check the features needed for your project: (Press <space> to select, <a> to t ? Check the features needed for your project: (Press <space> to select, <a> to t ? Check the features needed for your project: (Press <space> to select, <a> to t ? Check the features needed for your project: (*) Babel // 是否使用babel做转义 ( ) TypeScript // 是否使用class风格的组件语法 ( ) Progressive Web App (PWA) Support // 支持PWA (*) Router // 安装使用路由Router (*) Vuex // 安装使用Vuex状态管理,简单项目不建议使用安装 (*) CSS Pre-processors // 选择CSS 预处理类型 (*) Linter / Formatter // 选择Linter / Formatter规范类型 >(*) Unit Testing // 选择Unit测试方式 ( ) E2E Testing // 选择E2E测试方式
- 选择路由HTML5 history 模式
注:可以先不选择,后期如果用到,再手动添加即可
Vue CLI v3.9.2 ? Please pick a preset: Manually select features ? Check the features needed for your project: (Press <space> to select, <a> to t ? Check the features needed for your project: (Press <space> to select, <a> to t ? Check the features needed for your project: (Press <space> to select, <a> to t ? Check the features needed for your project: (Press <space> to select, <a> to t ? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-proce ssors, Linter, Unit ? Use history mode for router? (Requires proper server setup for index fallback ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
- 选择css预处理
注:根据自己的开发习惯选择预处理
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) > Less Stylus
- 选择ESLINT代码验证规则
? Pick a linter / formatter config: (Use arrow keys) > ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier
- 选择校验规则的时机
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i > to invert selection) >(*) Lint on save //保存代码时校验 ( ) Lint and fix on commit (requires Git)// fix和commit时候检查
- 选择单元测试组件
? Pick a unit testing solution: Mocha + Chai > Jest
- 选择是否要把Bable、PostCSS、ESlint等放到一个单独的文件里进行管理
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arro w keys) > In dedicated config files In package.json
- 是否要保存当前的选择配置项,以后安装时可以快速安装使用
? Save this as a preset for future projects? (y/N)y
- 输入自定义的配置名称
? Save this as a preset for future projects? Yes ? Save preset as: myCli
- 回车,开始安装... 出现以下内容表示安装完成!
added 59 packages from 101 contributors, updated 3 packages, moved 13 packages a nd audited 42942 packages in 30.434s found 64 low severity vulnerabilities run `npm audit fix` to fix them, or `npm audit` for details ⚓ Running completion hooks... � Generating README.md... � Successfully created project cli_test. � Get started with the following commands: $ cd cli_test $ npm run serve
- 安装完成后的目录结构如下:
- 启动项目
cd cli_test npm run serve 浏览器输入http://localhost:8080
- 部署打包项目
npm run build
执行后,会多一个dist的目录,直接把这个目录放到服务器Nginx下就可以访问了
CLI默认配置只是简单的项目框架,更多配置、组件封装请参考我其它的文章!