vue脚手架的创建

@vue/cli 脚手架 简介 脚手架 是一个工具 脚手架 帮助我们 创建一个基本的项目结构 1. @vue/cli 脚手架 的 安装 【只需要安装一次】 npm i -g @vue/cli 2. 使用 脚手架 工具，创建这个项目 vue create 项目名 安装配置步骤 2.1 选择版本，后续都使用配置好的项目版本 ? Please pick a preset: (Use arrow keys) default (babel, eslint) > Manually select features 【自定义配置】 2.2 选择所需模块 ? Check the features needed for your project: (Press 【space】 to select, 【a】 to toggle all, 【i】 to invert selection) >(*) Babel -- 识别 ES5\ES6的语法，并转换成 ES5-语法，实现兼容 ( ) TypeScript -- javascript的一种语法糖 (*) Progressive Web App (PWA) Support -- web app 的进度支持 (*) Router -- 路由模块 (*) Vuex -- vuex模块 (*) CSS Pre-processors -- css预处理语言（less、sass、stylus） (*) Linter / Formatter -- 【可选】代码风格、格式化代码 ，对于不符合风格的代码，在开发环境下会进行报警告 ( ) Unit Testing -- Unit 测试方法 ( ) E2E Testing -- E2E 测试方法 必选的内容是 Babel、Router、Vuex、CSS Pre-processors 2.3 选择 路由的模式 [不重要] 是否使用历史模式 ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y 2.4 选择css预处理语言 ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) > Less Stylus 2.5 选择代码格式化风格 ? Pick a linter / formatter config: (Use arrow keys) ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config > ESLint + Prettier 2.6 选择 本地存储 还是 git仓库 存储 Pick additional lint features: > (*) Lint on save 本地自己保存 ( ) Lint and fix on commit (requires Git) git仓库共享 2.7 选择 配置 保存的地方 ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) In dedicated config files 保存到配置文件 > In package.json 保存package.json文件 2.8 是否保存配置【提供给下次安装使用】 ? Save this as a preset for future projects? (y/N) y yes保存 ? Save preset as: 保存的名字 自定义名字 第二次安装步骤： 2.1 输入安装命令 vue create 项目名 2.2 选择保存的版本 Vue CLI v4.1.2 ? Please pick a preset: > study1 (less, babel, pwa, router, vuex, eslint) default (babel, eslint) Manually select features 3. 使用、运行项目 3.1 进入项目目录 3.2 运行项目命令 npm run serve

本文章由javascript技术分享原创和收集