vue创建项目自定义配置

最新推荐文章于 2024-08-07 20:43:54 发布

思考的行者

最新推荐文章于 2024-08-07 20:43:54 发布

阅读量2.8k

点赞数 3

分类专栏： vue

原文链接：https://blog.csdn.net/xfWgaoqiang/article/details/107691466?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~sobaiduend~default-1-107691466.nonecase&utm_term=vue%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE%E9%80%89%E4%BB%80%E4%B9%88&spm=1000.21

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

                        
                     
   
    
   
  一 . 安装 vue cli 
  npm install -g @vue/cli
 
  二 . 创建项目 vue create ‘项目名’ 
  vue create hello-world
 
  1、选择 Manually select features (自选项目配置)
 
  Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert s
election)
>(*) Babel   //ES6转ES5
 ( ) TypeScript   //JS超集
 ( ) Progressive Web App (PWA) Support   //渐进式Web应用
 (*) Router  //路由
 ( ) Vuex  //状态管理
 (*) CSS Pre-processors  //CSS预处理
 (*) Linter / Formatter   //规范类型
 ( ) Unit Testing  //测试
 ( ) E2E Testing  //测试
 
  2、是否使用history模式的路由 选择 “N” 或者 “Y”.
 
  Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
 
  3、CSS预处理器选择
 
  Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow ke
ys)
> Sass/SCSS
  Less
  Stylus
 
  4、选择哪个ESLint自动化代码格式化检测
 
  Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
 
  5、选择语法检查的时期
 
  Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save  //语法检查配置文件保存时检查
 ( ) Lint and fix on commit  //文件提交时检查
 
  6、配置文件的存放位置（推荐独立放置配置文件）
 
  Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files  //放独立文件放置
  In package.json  //放package.json里
 
  7、是否保存此预设(选择yes的话下次就可以不用进行配置)
 
  Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)
 
  三 . 运行 
  // 切换到项目
cd hello-world  
// 启动项目
npm run serve
 
 