最详细使用vue-cli创建一个通用的vue项目模板

1.首先安装vue-cli

官网提供两种安装方法
npm install -g @vue/cli
# OR
yarn global add @vue/cli

2.安装成功之后

vue create demo  //vue create 项目名

3.选择版本直接创建 或者 自己配置创建 //这里我选择了自己配置 Manually select features

最详细使用vue-cli创建一个通用的vue项目模板_第1张图片

4.进行配置选项

 (*) Babel // 是否使用babel做转义
 ( ) TypeScript //  是否使用class风格的组件语法
 ( ) Progressive Web App (PWA) Support // 支持PWA
 (*) Router // 安装使用路由Router
 (*) Vuex // 安装使用Vuex状态管理,简单项目不建议使用安装
 (*) CSS Pre-processors // 选择CSS 预处理类型
 ( ) Linter / Formatter // 选择Linter / Formatter规范类型
 ( ) Unit Testing // 选择Unit测试方式
 ( ) E2E Testing // 选择E2E测试方式

5.然后选择vue版本这里我们以vue2为例

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
  3.x 
> 2.x 

6.选择路由模式

 Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) //选择history还是hash模式

7.选择一个CSS预处理器这里我选得是sass/scss

 Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) //选择一个CSS预处理器(默认情况下支持PostSS、Autoprefixer和CSS模块)
> Sass/SCSS (with dart-sass) 
  Less 
  Stylus 

8.配置配置文件

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
//你想把你的配置文件放在一个独立的配置文件中?还是放到package.json中?
  In dedicated config files 
> In package.json

9.是否保存设置并且每次创建都是用这个设置,这里我选得n 如果你不想每次都配置就Y

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

10.根据自己需求选择安装依赖项时要使用的包管理器(有的小伙伴可能没有这步

 Pick the package manager to use when installing dependencies: (Use arrow keys)
  Use Yarn 
> Use NPM

11.然后等待项目创建完成


 $ cd demo //执行此命里进入创建的项目文件
 $ npm run serve  //执行此命令运行项目

12到这里我们的项目就创建完成了

你可能感兴趣的:(vue,vue.js)