创建vue项目

190 阅读2分钟

步骤一:输入项目创建命令

命令:vue create 项目名称

项目名称不要包含中文或大写字母,否则会创建失败

新建vue项目命令

这里项目名称为“new-vue-project”

步骤二:选择项目模板

Vue 3官方模板:Default ([Vue 3] babel, eslint) Vue 3官方模板:Default ([Vue 2] babel, eslint) 自定义模板:Manually select features

这里选择Manually select features

选择模板

除了官方模板和自定义模板外,还可以选择保存好的模板

之前的项目预设

步骤三:选择一些配置

Babel // 转码器,可以将ES6代码转为ES5代码,从而适应低版本的浏览器。 TypeScript // JavaScript的超集,包含并扩展了 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版本号

选择vue版本号

这里选择3.x

步骤五:进一步选择一些配置

Use class-style component syntax? (y/N) 是否使用类样式组件语法?(是/否)

是否使用类样式组件语法

这里选择:N

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) 与TypeScript一起使用Babel(现代模式、自动检测的polyfills、传输JSX所需)?(是/否)

与TypeScript一起使用Babel

这里选择:n

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) 对路由器使用历史记录模式?(需要为生产中的索引回退进行正确的服务器设置)(是/否)

对路由器使用历史记录模式

这里选择:Y

Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 选择CSS预处理器(默认情况下支持PostCSS、Autoprefixer和CSS模块):

Sass/SCSS (with dart-sass) Less Stylus

选择CSS预处理器

这里选择:Less

Pick a linter / formatter config: (Use arrow keys) 选择linter/formater配置:(使用箭头键) ESLint with error prevention only ESLint(仅具有错误预防功能) ESLint + Airbnb config ESLint+Airbnb (不太懂) ESLint + Standard config ESLint+Standard config(标准配置) ESLint + Prettier ESLint+Pretier(严格配置)

选择linter或formater配置

这里选择:ESLint + Standard config

这个配置项选择不同的,直接选了:Lint on save

这个不太懂

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) 您希望将Babel、ESLint等的配置放在哪里。?(使用箭头键) In dedicated config files 在专用配置文件中 In package.json 在package.json中

Babel、ESLint等的配置放在哪里

这里选择:In dedicated config files

Save this as a preset for future projects? (y/N) 是否将其保存为未来项目的预设?

是否将其保存为未来项目的预设

这里选择:N

配置选择完成

配置选择完成

vue项目创建完成

vue项目创建完成

代码风格检查和格式化可能会让人抓狂——尤其是ESLint+Pretier(严格配置),这个问题可以用ESLint插件来解决


vscode 安装 eslint 插件

步骤一:在 vscode 中搜索并安装 ESLint 插件

ESLint插件

已安装

ESLint插件-1

步骤二:配置 ESLint 插件

配置 ESLint 插件

配置 ESLint 插件-1

配置 ESLint 插件-2

至此,问题解决!