步骤一:输入项目创建命令
命令:vue create 项目名称
项目名称不要包含中文或大写字母,否则会创建失败
这里项目名称为“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版本号
这里选择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所需)?(是/否)
这里选择: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
这里选择: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(严格配置)
这里选择: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中
这里选择:In dedicated config files
Save this as a preset for future projects? (y/N) 是否将其保存为未来项目的预设?
这里选择:N
配置选择完成
vue项目创建完成
代码风格检查和格式化可能会让人抓狂——尤其是ESLint+Pretier(严格配置),这个问题可以用ESLint插件来解决
vscode 安装 eslint 插件
步骤一:在 vscode 中搜索并安装 ESLint 插件
已安装:
步骤二:配置 ESLint 插件
至此,问题解决!