Vue-cli3搭建完整项目之项目初始化配置

​ 最近发现vue-cli的版本更新到3+了,本着学习的态度开始研究了一下它,发现里面变化太大了,比如原先的暴露出来的webpack的配置你会发现在3里面根本找不到,下面就开始搭建一个完整的项目。

vue-cli3官网

一、升级或下载vue-cli3

npm install -g @vue/cli

二、创建项目

  1. 创建项目
vue create 你的项目名称

注意:原先的vue init 指令已经不适用了,如果想继续使用可以安装@vue/cli-init

npm install -g @vue/cli-init
vue init webpack 你的项目名称
  1. 项目配置
    在这里插入图片描述

  2. default: 默认配置,只有bable和eslint

  3. Manually select features: 手动配置

    我选的是手动配置,以下是我的配置:

    在这里插入图片描述

    • Babel:将ES6编译成ES5
    • TypeScript:JS超集,主要是类型检查
    • Progressive Web App(PWA)Support:渐进式WEB应用支持
    • Router:路由
    • Vuex:状态管理
    • Linter/ Formatter:代码检查工具
    • CSS Pre-processors:css预编译 (稍后会对这里进行配置)
    • Unit Testing:单元测试,开发过程中前端对代码进行自运行测试
    • E2E Testing: 端对端测试,属于黑盒测试,通过编写测试用例,自动化模拟用户操作,确保组件间通信正常,程序流数据传递如预期。
    路由使用历史模式? 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
    Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y
    
    使用什么css预编译器? 我选择的less(由于我项目中配了一个vux,它是基于lessd的)在这里插入图片描述
    代码检查工具选择:在这里插入图片描述
    • tslint: typescript格式验证工具(如果前面选择了TypeScript会有这一项)
    • eslint w...: 只进行报错提醒;(如果还没熟悉eslint,推荐使用此模式)
    • eslint + A...: 不严谨模式;
    • eslint + S...: 正常模式
    • eslint + P...: 严格模式;
    代码检查方式:我是都选了在这里插入图片描述
  4. List item

    所有的依赖目录的配置放置的位置(一般都是package.json)在这里插入图片描述
    是否在以后的项目中使用以上配置?(我选的是no,如果选是的话,下一次初始化项目时,会多出一条你上一次的配置)
    Save this as a preset for future projects? (y/N) n
    
    下载依赖的工具:使用 yarn,速度快。(也可以使用npm,看个人习惯)在这里插入图片描述

到此为止,安装就完成了,可以等待安装成功。

注:也可以使用vue ui指令进行可视化界面创建项目,与上面的指令式的没多少差别,只是将我们要做的那些操作变成网页选项的形式,个人感觉还是挺不错,推荐使用(里面加了很多人性化的小功能)

在这里插入图片描述

这就是创建好后的项目目录结构在这里插入图片描述

Logo

前往低代码交流专区

更多推荐