使用vue-cli3搭建一个项目

时间:2023-03-09 09:38:35
使用vue-cli3搭建一个项目

前面说过用vue-cli3快速开发原型的搭建,下面来说一下搭建一个完整的项目

首先我们可以输入命令(创建一个项目名为test的项目)

vue create test

输完这个命令后,会让你选择配置项,默认是eslint和babel,也可以选择其它的选项,如vue-router、vue-x、css预处理语言、单元测试、typeScript等。。。

选完这些选项之后,就会自动安装依赖什么的将项目搭建起来。

在现有的项目中安装插件

上面我们创建test项目时,加入我们直选了babel和eslint插件

我们想添加其它插件时,可以使用vue add 命令

vue add @vue/eslint

这个命令将 @vue/eslint 解析为完整的包名 @vue/cli-plugin-eslint,然后从 npm 安装它,调用它的生成器。

# 这个和之前的用法等价
vue add @vue/cli-plugin-eslint

vue-router 和 vuex 的情况比较特殊——它们并没有自己的插件,但是你仍然可以这样添加它们:

vue add router
vue add vuex

我们可以在根目录下创建vue.config.js文件来配置之前在webpack中配置的东西

比如说配置搭理端口为8089

// vue.config.js
module.exports = {
  // 选项...
  devServer: {
  port: 8089
 }
}

vue-cli3搭建一个项目

vue-cli3快速创建项目

使用Vue-cli 3.0搭建Vue项目