怎样用Vuecli 3.0疾速建立项目
2019-11-18杂谈搜奇网35°c
A+ A-一.装置
1.装置node.js,这里须要注重的是,Vue CLI 3须要 nodeJs ≥ 8.9,所以我们去中文官方下载地点:http://nodejs.cn/download/ ,下载最新版本即可;
2.装置vue-cli3.0版本:
两种状况:1.你之前装置过vue-cli3.0之前的版本,需卸载之前版本,再装置新版本;
卸载旧版本:
npm uninstall vue-cli -g
装置新版本:
npm install -g @vue/cli
2.你之前没有装置过vue-cli3.0之前的版本,直接装置新版本即可;
3.装置nrm,有时刻外洋资本太慢,运用这个就能够疾速地在 npm 源间切换:
1.全局装置nrm
npm install -g nrm
2.检察当前运用源
nrm current
3.检察可选源(带*号即为当前运用源)
nrm ls
4.切换源
以淘宝镜像为例:
nrm use taobao
5.测试源速率(即相应时刻)
比方:测试官方源和淘宝源的相应时刻
nrm test npm
nrm test taobao
能够得出,淘宝源的速率要远快于官方源,装置完nrm以后,我们举行竖立项目,我们下载和搭建的速率就会快许多,才称上疾速两个字;
二.竖立项目
1.新建项目
vue create jjrweb //背面为文件名 不支撑驼峰(含大写字母)
弹出以下界面:
1.第一个“ my-default”是我之前保留的预设设置,等下下面会引见到;
2.default(babel,eslint):默许套餐,供应 babel 和 eslint 支撑;
3.Manually select features:本身去挑选须要的功用,供应更多的特征挑选。比方假如想要支撑 TypeScript ,就应该挑选这一项;
假如想要更多的支撑,这里我挑选Manually select features:切换到这项,按下 enter 键选中,
弹出以下界面:
能够多选:运用方向键在特征选项之间切换,运用空格键选中当前特征,运用 a 键切换挑选一切,运用 i 键翻转选项。
( ) Babel //转码器,能够将ES6代码转为ES5代码,从而在现有环境实行。
( ) TypeScript// TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩大了 JavaScript 的语法,须要被编译输出为 JavaScript在浏览器运转,现在较少人再用
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router(vue路由)
( ) Vuex // vuex(vue的状况治理模式)
( ) CSS Pre-processors // CSS 预处置惩罚器(如:less、sass)
( ) Linter / Formatter // 代码作风搜检和花样化(如:ESlint)
( ) Unit Testing // 单元测试(unit tests)
( ) E2E Testing // e2e(end to end) 测试
这里我挑选的为图片中的选项,回车:
弹出以下界面:
是不是运用history router:这里我挑选NO,后期假如要改成history,手动去路由里增加即可,回车;
弹出以下界面:
css预处置惩罚器,主要为css处置惩罚浏览器兼容、简化CSS代码 等题目,你习气运用哪一种挑选哪一种即可,这里我挑选Less
弹出以下界面:
ESLint:供应一个插件化的javascript代码检测工具,ESLint + Prettier //运用较多,这里我挑选ESLint + Prettier
弹出以下界面:
什么时刻检测:这里我挑选Lint on save 保留时检测
弹出以下界面:
怎样寄存设置 :这里我挑选图中挑选
弹出以下界面:
是不是保留本次设置(y:纪录本次设置,然后须要你起个名; n:不纪录本次设置):这里我挑选NO,上文中正好说到这个,假如你挑选yes,下次竖立项目的时刻就能够挑选按之前模板来
弹出以下界面:
搭建完成:能够进入到该项目文件夹,然后运转项目;
2.项目构造
精简了许多,但照样和vue2.0有许多辨别的,基础的用法变化不是迥殊大,如图:
3.vue-cli2.0和vue-cli3.0的辨别
1.vuex(状况治理):
vue cli 2 中 :vuex是搭建完成后本身npm install的,并不包含在搭建历程当中。能够看到vue cli 2的vuex默许文件夹(store)又包含了三个js文件:action(寄存一些挪用外部API接口的异步实行的的要领,然后commit mutations转变mutations 数据)、index(初始化mutations 数据,是store的出口)、mutations(处置惩罚数据逻辑的同步实行的要领的鸠合,Vuex中store数据转变的唯一要领commit mutations)
vue cli 3 中:vuex是包含在搭建历程供挑选的预设。vue cli 3 中默许只用一个store.js替代了本来的store文件夹中的三个js文件。action、mutations、state以及store 的 getters 的用法有许多
2.router (路由):
vue cli 2 :“ router/index.js ”
vue cli 3:“router.js”(用法和做的事都一样)
3.去掉 static 、 新增 public 文件夹
vue cli 2 :static 是 webpack 默许寄存静态资本的文件夹,打包时会直接复制一份到dist文件夹不会经由 webpack 编译
vue cli 3 :摒弃 static 新增了 public 。vue cli 3 中“静态资本”两种处置惩罚方式:
经webpack 处置惩罚:在 JavaScript 被导入或在 template/CSS 中经由过程“相对路径”被援用的资本会被编译并紧缩
不经webpack 处置惩罚:安排在 public
目录下或经由过程绝对路径被援用的资本将会“直接被拷贝”一份,不做任何编译紧缩处置惩罚
4.index.html :
vue cli 2 :“index.html ”
vue cli 3 :“public/index.html ”此模板会被 html-webpack-plugin 处置惩罚的
5.src/views:
vue cli 3 的 src文件夹 新增 views文件夹 用来寄存 “页面”,辨别 components(组件)
6.去掉 build(依据config中的设置来定义划定规矩)、config(设置差别环境的参数)文件夹 :
vue cli 3 中,这些设置 你能够经由过程 敕令行参数、或 vue.config.js
(在根目录 新建一个 vue.config.js 同名文件)里的 devServer 字段设置开辟服务器
7.babel.config.js:
设置Babel 。Vue CLI 运用了 Babel 7 中的新设置花样 babel.config.js
。和 .babelrc
或 package.json
中的 babel
字段差别,这个设置文件不会运用基于文件位置的计划,而是会一致地运用到项目根目录以下的一切文件,包含 node_modules
内部的依靠。官方推荐在 Vue CLI 项目中一直运用 babel.config.js
庖代别的花样。
8.根目录的一些其他文件的转变:
之前一切的设置文件都在vue create 搭建时preset预设 或许 后期能够经由过程 敕令参数 、 vue.config.js 中设置
三.项目编写
1.在package.json文件中增加
"scripts": { "serve": "vue-cli-service serve --mode development", "build": "vue-cli-service build --mode product", "test": "vue-cli-service build --mode test", "lint": "vue-cli-service lint", "test:unit": "vue-cli-service test:unit" },
2.在根目录下竖立.env.development文件,并设置
# 开辟环境
NODE_ENV = 'development'
# base api
VUE_APP_BASE_API = '/api'
VUE_APP_MOCK = '/mock'
VUE_APP_BASE_HTTP_MOCK = 'http://11.3.120.181:8989'
VUE_APP_BASE_HTTP = 'http://11.3.120.181:8765'
3.在根目录下竖立.env.test文件
# 测试环境
NODE_ENV = 'test'
# base api
VUE_APP_BASE_API = '/api'
VUE_APP_BASE_HTTP = 'http://11.3.120.181:8765'
4.在根目录下竖立.env.product文件
# 生产环境
NODE_ENV = 'product'
#营业接口地点
VUE_APP_BASE_API = '/api'
#VUE_APP_API_HOST = 'https://www.shenchan.com'
VUE_APP_API_HOST = 'http://10.3.320.201:8765'
5.在main.js里设置api变量
import api from './http/index'
import globalData from './utils/globalData'
Vue.config.productionTip = false;
Vue.use(api)
// 设置全局变量
Vue.prototype.$globalData = globalData
6.新建一个utils文件夹,内里竖立一个globalData.js文件
const globalData = { API_HOST: process.env.VUE_APP_API_HOST } export default globalData
7.新建一个http文件夹,内里竖立三个api.js,index.js,list.js文件,以及一个module文件夹内里寄存login.js接口
api.js:设置接口设置和拦截器的编写
import axios from 'axios' // import { getToken } from '@/utils/auth' import globalData from '@/utils/globalData' // create an axios instance const service = axios.create({ baseURL: globalData.API_HOST, // url = base url + request url withCredentials: false, // send cookies when cross-domain requests timeout: 10000 // request timeout }) // request interceptor service.interceptors.request.use( config => { // mock数据和接口数据辨别 if (config.method === 'get' && config.params) { console.log('1111') // config.params.applytime = new Date() } if (process.env.NODE_ENV === 'product') { config.url = process.env.VUE_APP_API_HOST + config.url console.log('2222'+config.url) } else { config.url = process.env.VUE_APP_BASE_HTTP + process.env.VUE_APP_BASE_API + config.url console.log('3333'+config.url) } console.log('要求地点:' + config.url) return config }, error => { // do something with request error console.log(error) // for debug return Promise.reject(error) } ) // response interceptor service.interceptors.response.use( response => { console.log('返回效果:' + response) const res = response.data console.log('4444' + res) if (res !== '') { if (process.env.NODE_ENV === 'development') { console.log('开辟环境'+res.msg) // 提醒 } return Promise.reject(res.msg) } else { return res } }, error => { console.error(error) if (error.response.data.code === 401) { console.log('登录非常,请从新登录') // 提醒,然后在此处增加跳转到登录 return false } if (process.env.NODE_ENV === 'development') { console.log(error.response.data + '开辟环境err') // 提醒 } return Promise.reject(error) } ) export default service
index.js:设置要求名头
import list from './list' const busineApi = Vue => { if (busineApi.installed) { return } busineApi.installed = true Object.defineProperties(Vue.prototype, { // 此处挂载在 Vue 原型的 $list 对象上 $hjApi: { get () { return list } } }) } export default busineApi
list.js:接口模块的引入
// Saas体系
import login from './module/login' // 登录模块
const allApi = Object.assign(login)
export default allApi
login.js:接口定义
import axios from '../api' // 登录 export const login = (data = {}) => { return axios({ url: '/auth/oauth/token', method: 'get', params: data }) } export default { login }
8.页面内里要求写法
methods: { // 登录 login () { console.log('abcd') // 登录接口 this.$hjApi.login({ username: 'hjhj', password: '123456', }).then(res => { console.log(res+'登录胜利') }).catch(err => { console.log(err) }) } }