vue框架搭建

268 阅读2分钟

(搭建打包测试服和正式服环境)


(assets用于存放静态资源,如images,共用样式);

(common用来放置utils.js文件,封装的ajax.js,bus.js,mixins.js等文件);

(config用来存放各配置文件,如请求接口文件);

(view用来存放vue的视图层,视图层下是组件);

一、新建vue cli脚手架项目

vue create project

选择自定义配置脚手架

Manually select features//手动设置


babel:一个javascript转译器,将最新版的js语法(es6、es7)转换为现阶段浏览器可以兼容的js代码 typescript:作用有些类似于babel,拥有类型检查能力和面向对象新特征。

PWA:渐进式WEB应用 

Router:路由,设置url,使不同的url显示不同的页面  

Vuex:作用类似于全局对象,但是并不完全相同。 

CSS Pre-processors:css预处理器 

Linter / Formatter:代码规范标准

Unit Testing:单元测试

E2E Testing:e2e测试 

选择何时检查代码规范

1、保存的时候

2、fix和commit的时候 

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

选择将下面的文件保存到哪里

1、独立分放

2、放在package.json

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)> In dedicated config files  In package.json

是否将上述配置保存(保存后,下一次将能直接一键配置)

 Save this as a preset for future projects? (y/N)

二、.eslintrc.js配置

规则级别

"off"或者0,不启用这个规则

"warn"或者1,出现问题会有警告

"error"或者2,出现问题会报错

module.exports = {  root: true,  env: {    node: true  },  extends: ["plugin:vue/essential", "@vue/prettier"],  rules: {    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",    "no-unused-vars": "off",    "prettier/prettier": [      // "error",      {        "singleQuote": true      }    ]  },  parserOptions: {    parser: "babel-eslint"  }};

三、新建.env.beta文件,环境变量打包

NODE_ENV=production //打包变量,在线上的环境
REALEASE=beta //打包是用于区分,不同线上地址
VUE_APP_REALEASE=test //业务环境变量

打包指令:



四、配置多页面:(vue配置打包不同的页面,相当于多开一个入口)

配置单一入口:


五、接口配置

六、main.js的引入