一.安装
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)
})
}
}
怎么用Vuecli 3.0快速创建项目的更多相关文章
-
vue cli 3.0快速创建项目
本地安装vue-cli 前置条件 更新npm到最新版本 命令行运行: npm install -g npmnpm就自动为我们更新到最新版本 淘宝npm镜像使用方法 npm config set reg ...
-
vue-cli3.X快速创建项目
1.安装 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli. 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过以下方式先卸载它: npm unin ...
-
vue-cli 3.0生成的项目run build后为空白页
vue-cli 3.0 生成的项目与2.x不同,其中并没有webpack配置文件config/index.js.这个时候需要我们在项目的根目录下创建一个vue.config.js文件,代码如下: mo ...
-
springBoot(2)---快速创建项目,初解jackson
快速创建项目,初解jackson 一.快速创建项目 springboot官网提供了工具类自动创建web应用:网址:http://start.spring.io/ 官网页面 1.快速创建一个 选择web ...
-
SpringBoot——IDEA使用 Spring Initializer快速创建项目【四】
前言 使用Spring Initializer快速创建项目 步骤 首先肯定是打开我们的IDEA的编辑器呀~ 创建项目 File -> New -> Project Spring Initi ...
-
vue-cli 3.0脚手架创建vue项目
1. 卸载vue-cli 2.0 npm uninstall -g vue-cli 2. 安装vue-cli 3.0 npm install @vue/cli 3. 创建项目 npm create & ...
-
SpringBoot2.0 最简单的 idea 快速创建项目
第一步 第二步 第三步 以上就是idea快速创建springboot的方法,创建之后等maven 依赖下载完成,就可以使用
-
vue-cli快速创建项目,可视化创建
之前学习了交互式创建,发现过程无聊,而且不方便,后面又学习了图形可视化创建,下面进行分享 1.打开cmd 2.输入vue ui,输入后会出现如下 C:\Users\12235>vue ui St ...
-
vue cli3.0快速搭建项目详解(强烈推荐)
这篇文章主要介绍下vue-cli3.0项目搭建,项目结构和配置等整理一下,分享给大家. 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cl ...
随机推荐
-
Flex编译程序出现 Could not find compiled resource bundle 'SharedResources' for locale 'en_US'.
Flex编译程序出现 Could not find compiled resource bundle 'SharedResources' for locale 'en_US'. 而且静态类居然为nul ...
-
c#省市联动
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
-
PS常用
一.文字和背景居中 1.按Ctrl+A或用矩形框选中所有 2.按选择工具->在工具属性栏里面会显示6种方向的对齐方式 二.画准确铺助线 1.视图->新建参考线->输入数值既可
-
windows 下删除.svn文件
Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\DeleteSVN] @= ...
-
PHP基础设计模式——工厂模式
<?php//文件名:Factory namespace IMooc; class Factory { //工程模式 static function creatDatabase() { $db ...
-
点击超链接执行js代码实现确认操作
如题,本次是要实现点击超链接实现执行js代码,并确认是否删除数据库数据,采用php. 首先链接数据库,查询数据库数据: 1: <?php 2: $dbms='mysql'; //数据库类型 ,对 ...
-
input 显示/隐藏密码
js代码: // 显示/隐藏密码 $('.open').on('click',function(){ if($("#psw").prop('type')=='password'){ ...
-
NLP —— 图模型(一)隐马尔可夫模型(Hidden Markov model,HMM)
本文简单整理了以下内容: (一)贝叶斯网(Bayesian networks,有向图模型)简单回顾 (二)隐马尔可夫模型(Hidden Markov model,HMM) 写着写着还是写成了很规整的样 ...
-
[USACO18DEC]Cowpatibility
Description: Farmer John 的 \(N\) 头奶牛(\(2\le N\le 5\times 10^4\))各自列举了她们最喜欢的五种冰激凌口味的清单.为使这个清单更加精炼,每种可 ...
-
用swift开发仪表盘控件(一)
苹果swift刚刚推出不久,接触到这个语言是一个偶然的机会,无聊之余随便看了下它的语法: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveW5tYW95b2 ...