0
点赞
收藏
分享

微信扫一扫

使用vue/cli4+版本快速搭建项目结构


​​@vue/cli​​

前言


如果下载速度慢,可以设置淘宝镜像-国内速度杠杠滴

npm config set registry "https://registry.npm.taobao.org"


1、升级本地环境


卸载旧版本 安装新版本脚手架


卸载全局安装旧版本
npm uninstall -g vue-cli
全局安装新版本
npm install -g @vue/cli


vue --version 


使用vue/cli4+版本快速搭建项目结构_vue/cli

 2、创建项目


vue create 项目名称

vue ui     打开网页版可视化操作


第1步 -选择自定义

// 默认预设配置 babel,eslint
default (babel, eslint)
// 手动选择配置(我们要选择这种方式)
Manually select features

使用vue/cli4+版本快速搭建项目结构_vue/cli_02

第2步-选择需要的工具

1.Babel //是否使用babel编译代码,废话当然用
2.TypeScript //是否使用TypeScript,看文章标题
3.Progressive Web App (PWA) Support //支持渐进式网页应用程序
4.Router //路由管理器
5.Vuex //状态管理模式(构建一个中大型单页应用时)
6.CSS Pre-processors //css预处理
7.Linter / Formatter //代码风格、格式校验
8.Unit Testing // 单元测试
9.E2E Testing // 即端对端测试

空格选中,上下键切换,回车确认,具体配置见下图

使用vue/cli4+版本快速搭建项目结构_根目录_03

第3步-是否使用类方式的组件

使用vue/cli4+版本快速搭建项目结构_vue/cli_04

第4步


选择是否使用路由 history router,其实直白来说就是是否路径带 # 号,建议选择 N,否则服务器还要进行配置


使用vue/cli4+版本快速搭建项目结构_vue_05

第5步

使用vue/cli4+版本快速搭建项目结构_vue_06

第6步

使用vue/cli4+版本快速搭建项目结构_vue_07

第7步

使用vue/cli4+版本快速搭建项目结构_脚手架构建项目目录_08

第8步-初始化项目

使用vue/cli4+版本快速搭建项目结构_脚手架构建项目目录_09

项目构建完成 

使用vue/cli4+版本快速搭建项目结构_vue_10

项目目录结构

使用vue/cli4+版本快速搭建项目结构_vue_11

环境配置


下面就是关于项目的环境配置了,我这边一般喜欢用 test、preview、production分别表示测试,预览,生产三种环境

修改 package.json 文件如下

"scripts": {
    "serve": "vue-cli-service serve",
    "test": "vue-cli-service build --mode test",           //测试
    "preview": "vue-cli-service build --mode preview",     //预览
    "build": "vue-cli-service build --mode production",    //生产
    "lint": "vue-cli-service lint"
},
在项目根目录下新建 .env.test、.env.preview、 .env.production 文件,分别对应三个环境的配置文件,注意,名字要与 --mode 后面的名字分别对应

.env.test 代码如下

NODE_ENV="test"
VUE_APP_BASE_URL="测试环境域名"
.env.pre 代码如下

NODE_ENV="preview"
VUE_APP_BASE_URL="预览环境域名"
.env.prod 代码如下

NODE_ENV="production"
VUE_APP_BASE_URL="生产环境域名"
ok,这样环境就配置好了,分别用以下命令来打包不同环境的包就可以了

npm run test    //测试
npm run pre     //预发布
npm run prod    //生产
另外需要说明一点的是,本地环境会默认从 .env.development 文件中读取配置

所以记得有需要记得新建一个然后存放配置

我的 .env.development 代码如下

NODE_ENV="development"
VUE_APP_BASE_URL="本地环境域名"


项目配置


从 vue-cli3.0 开始 build 和 config 目录就取消了,如果需要修改配置,可以在项目的根目录新建一个 vue.config.js 文件来覆盖项目的配置,因为项目的配置比较多,这里就不分别介绍了,可以 访问官方文档



举报

相关推荐

0 条评论