一. 初始化
安装@vue/cli ,
npm install @vue/cli -g
或者
yarn global add @vue/cli
二. 创建项目
vue create 项目名
进行项目初始化
D:\workspace\test>vue create element-plus-test
? Your connection to the default npm registry seems to be slow.
Use https://registry.npm.taobao.org for faster installation? (Y/n)y
是否使用淘宝镜像进行快速安装
Vue CLI v4.5.15
? Please pick a preset: (Use arrow keys)
Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
> Manually select features
Manually select features【选择手动配置】
Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Choose Vue version
(*) Babel
(*) TypeScript
>( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
Check the features needed for your project (选择你项目需要添加的功能) ;
-
Choose Vue Version
: 选择vue版本
-
Babel
:转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
-
TypeScript
:TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行
Progressive Web App (PWA) Support:渐进式Web应用程序
-
Router
:vue-router(vue路由)
Vuex
:vuex(vue的状态管理模式)
CSS Pre-processors:css预处理器(如:less、sass)
-
Linter
/ Formatter
:代码风格检查和格式化(如:ESlint)
-
Unit Testing
:单元测试(unit tests)
- E2E Testing:e2e(end to end) 测试
Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with
2.x
> 3.x
Choose a version of Vue.js that you want to start the project with (选择项目使用的vue版本),选择3.x
? Use class-style component syntax? (y/N) y
是否使用Class风格装饰器?如果在项目中想要保持使用TypeScript的class风格的话,建议选择y
即原本是:home = new Vue()创建vue实例
使用装饰器后:class home extends Vue{}
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) y
使用Babel与TypeScript一起用于自动检测的填充? yes
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y
路由使用历史模式? 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
Pick a CSS pre-processor : (选择一个CSS预处理器) ,这里选择 less
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
TSLint (deprecated)
Pick a linter / formatter config (选择一个格式化配置),选择:ESLint + Standard config
-
ESLint with error prevention only
: 只进行报错提醒;
-
ESLint + Airbnb config
: 不严谨模式;
-
ESLint + Standard config
: 标准模式;
-
ESLint + Prettier
: 严格模式;
-
TSLint (deprecated)
: typescript格式验证工具
? 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)
代码检查方式:选择保存时检查
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
In dedicated config files
> In package.json
Where do you prefer placing config for Babel, ESLint, etc.? 选择:In package.json ,
vue-cli 一般来讲是将所有的依赖目录放在package.json文件里
? Save this as a preset for future projects? (y/N) n
是否在以后的项目中使用以上配置?n
然后等待安装。。。。
Vue CLI v4.5.15
✨ Creating project in D:\workspace\test\element-plus-test.
⚙️ Installing CLI plugins. This might take a while...
added 1327 packages in 22s
16 packages are looking for funding
run `npm fund` for details
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)