vue-cli脚手架教程
一,基础入门
1,安装vue-cli
安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v 检测你是否安装了npm和版本情况。
如果npm没有问题,接下来我们可以用npm 命令安装vue-cli了,在命令行输入下面的命令
npm install vue-cli -g
-g :代表全局安装。如果你安装时报错,一般是网络问题,你可以尝试用cnpm来进行安装。安装完成后,可以用vue -V来进行查看 vue-cli的版本号。注意这里的V是大写的。
如果vue -V的命令管用了,说明已经顺利的把vue-cli安装到我们的计算机里了。
2,初始化项目
使用命令行来初始化一个vue-cli脚手架项目(常用初始化命令如下)
vue init webpack projectname
格式
vue init <template-name> <project-name>
格式说明
init
:表示我要用vue-cli来初始化项目
<template-name>
:表示模板名称,vue-cli官方为我们提供了5种模板,
- webpack-一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。
- webpack-simple-一个简单webpack+vue-loader的模板,不包含其他功能,让你快速的搭建vue的开发环境。
- browserify-一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。
- browserify-simple-一个简单Browserify+vueify的模板,不包含其他功能,让你快速的搭建vue的开发环境。
-simple-一个最简单的单页应用模板。
<project-name>
:标识项目名称,这个你可以根据自己的项目来起名字。
在实际开发中,一般我们都会使用webpack这个模板。
执行命令后,会询问我们几个简单的选项,我们根据自己的需要进行填写就可以了!
- Project name :项目名称 ,如果不需要更改直接回车就可以了。注意:这里不能使用大写,所以我把名称改成了vueclitest
- Project description:项目描述,默认为A Vue.js project,直接回车,不用编写。
- Author:作者,如果你有配置git的作者,他会读取。
- Install vue-router? 是否安装vue的路由插件,我们这里需要安装,所以选择Y
- Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n,如果你是大型团队开发,最好是进行配置。
- setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha,我们这里不需要,所以输入n。
- Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试,我们这里不需要,所以输入n。
然后项目就构建完成了!
- cd vuecliTest 进入我们的vue项目目录
- npm install 装我们的项目依赖包,也就是安装package.json里的包,如果你网速不好,你也可以使用cnpm来安装
- npm run dev 发模式下运行我们的程序
3,npm run 命令的区别
npm run dev:在本地调试,把项目在本地运行起来
npm run build:打包项目
我们在本地调试的时候只要命令行执行npm run dev
就可以把这个项目跑起来,但是现在我们要把他放到服务器上的话用npm run build
命令就可以啦。
在projectname项目目录下执行 npm run build ,打包项目,打包完成之后,我们就可以像打开静态网页一样打开我们完成的项目。
下图为打包生成的dist文件夹,其中index.html为入口文件
这时你打开了index.html文件,发现网页一片空白,打开F12发现console报了几个错误
这是因为引用资源的路径问题,我们只要在下图的地方修改一下再打包就可以了,需要修改的文件在项目目录下的config文件夹里的index.js文件中
改完,再次执行npm run build,然后打开index.html成功访问vue脚手架项目。
4,使用图形化界面创建vue-cli项目
运行 vue ui 命令可以打开 vue项目管理器(视图界面),可以根据需求自定义创建项目,如下图
二,开发
1,vue-cli引入axios
终端进入到vue-cli项目的根目录,执行命令行,安装axios(下面两个都需要)
npm install axios
npm install --save axios vue-axios
然后在 main.js 中引入
import Vue from 'vue'
import App from './App'
import router from './router'
/* 引入axios开始 */
import vueAxios from 'vue-axios'
import axios from 'axios'
Vue.use(vueAxios,axios)
/* 引入axios结束 */
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
在 HelloWorld.vue 中修改
<template>
<div>
<!-- template内容开始(外围必须包裹一个div,因为组件只允许有唯一的一个根元素) -->
<button v-on:click="sendRequest">发送axios请求</button>
<div v-show="showText">
{{msg}}
</div>
<!-- template内容结束 -->
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
showText:false,
msg: ''
}
},
methods:{
sendRequest(){
// axios请求开始
this.axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response=>{
this.msg = response.data.bpi
console.log("axios请求成功");
})
.catch(function (error) {
console.log(error)
})
// axios请求结束
this.showText=true
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- style加上scoped表示此css样式只在本模块中有效 -->
<style scoped>
</style>
npm run dev启动本地项目,http://localhost:8080进入项目首页
点击按钮发送axios请求回显到msg中
2,export default 和 export
- Vue 是通过 webpack 实现的模块化,因此可以使用 import 来引入模块
- export 用来导出模块,Vue 的单文件组件通常需要导出一个对象,这个对象是 Vue 实例的选项对象,以便于在其它地方可以使用 import 引入。而 new Vue() 相当于一个构造函数,在入口文件 main.js 构造根组件的同时,如果根组件还包含其它子组件,那么 Vue 会通过引入的选项对象构造其对应的 Vue 实例,最终形成一棵组件树。
export 和export default 的区别在于:export 可以导出多个命名模块,例如
//demo1.js
export const str = 'hello world'
export function f(a){
return a+1
}
对应的引入方式
//demo2.js
import { str, f } from 'demo1'
export default 只能导出一个默认模块,这个模块可以匿名,例如
//demo1.js
export default {
a: 'hello',
b: 'world'
}
对应的引入方式
//demo2.js
import obj from 'demo1'
引入的时候可以给这个模块取任意名字,例如 "obj",且不需要用大括号括起来。
3,vue-cli引入vue-router路由
(1)在package.json文件中的dependencies中添加路由及其版本,如果有的话可以忽略。
"dependencies": {
"axios": "^0.20.0",
"vue": "^2.5.2",
"vue-axios": "^2.1.5",
"vue-router": "^3.4.3"
}
(2)npm安装
npm install vue-router --save
(3)在index.js路由文件中引入路由
import Router from 'vue-router'
Vue.use(Router)
(4)在src/components文件夹下新建test.vue等组件,然后再index.js路由文件中进行配置组件
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path:'/test',
name:'test',
component:test
},
{
path:'/test2',
name:'test2',
component:test2
}
]
① 经典路由案例
App.vue是脚手架的入口页面,添加路由链接
/test 和 /test2 就是上面配置好的组件
<template>
<div id="app">
<router-link to="/test">test页面</router-link>
<router-link to="/test2">test222页面</router-link>
<router-view/> <!-- 匹配到的路由组件会显示到router-view容器中 -->
</div>
</template>
效果:点击两个菜单,路由到不同的页面中
4,vue-cli跳转页面的方式
① router-link标签跳转
<router-link to='/citylist'><div class="header-right">城市</div></router-link>
<router-link :to="{path:'/partysubject',query:{id:3}}">城市</router-link>
② js方法跳转
<button @click = "func()">跳转</button>
<script>
export default{
methods:{
func (){
this.$router.push({name: '/order/page1',params:{ id:'1'}});
}
}
}
</script>
补充第二种方式
this.$router.push({path: ''/order/index''});
this.$router.push({path: '/order/page1',query:{ id:'2'}});
this.$router.push({name: '/order/page2',params:{ id:'6'}});
query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.$route.query.name和this.$route.params.name。
query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示
5,vue-cli引入elementui组件
(1)命令安装elementui
npm i element-ui -S
(2)也可以在package.json中的dependencies添加依赖,然后npm install安装
装了elementui之后,在main.js中添加
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' //单独引入样式文件
Vue.use(ElementUI)
然后就可以使用elementui组件了。
6,el-upload上传组件上传成功之后获取图片信息
el-upload上传组件上传成功之后获取图片信息(图片在服务器上的存储路径等相关信息)并保存到data中,供表单提交
<el-upload
class="upload-demo"
action="/api/lifespace/uploadImage"
name="file"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:on-success="savePic"
list-type="picture"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
使用element-ui中的上传组件,upload,这个默认发送post请求,
在使用upload组件自动携带的请求方式发送
action->请求的url
on-success->请求发送成功的钩子–方法function(response, file, fileList)默认参数3个
auto-upload->是否在选取文件后立即进行上传,默认是true(选取文件即上传)
name->上传的文件字段名,默认值file,后台有时候需要发送别的字段名如image就这修改
data->上传时附带的额外参数object
disabled->是否禁用,默认false
http-request->覆盖默认的上传行为,可以自定义上传的实现–方法(当请求方式不为post可以自定义方式)
uploadSuccess(response,file,fileList){
const array=response;
console.log(array)
this.picList.push(array)
}
7,vue-cli中axios跨域的问题
在config文件夹下的index.js文件中的proxyTable字段中,作如下处理
proxyTable: {
'/api':{
target:'http://localhost:8081',//后端地址
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
}
在具体使用axios的地方,修改url如下即可
this.axios.post('/api/lifespace/saveContent',{content:contents})
.then(response=>{
console.log(response.data);
})
.catch(function (error) {
// console.log(error)
})
8,vue-cli添加全局js
填写全局config.js
function getConfig(str){
return "test";
}
//暴露的方法
//公开的方法
export default {
getConfig:getConfig,//获取 公共配置方法
}
main.js 引入当前文件
import getMyConfig from './assets/js/config'
Vue.prototype.$getMyConfig = getMyConfig;//引入配置文件
这时就可以使用了,使用方法如下(获取test字符串)
var ajaxurl = this.$getMyConfig.getConfig('ajaxurl');
9,elementUI upload上传文件时携带token
前端
<template>
<el-upload action="test" :headers="importHeaders"></el-upload>
</template>
<script>
var mytoken = localStorage.getItem('token') // 要保证取到
export default {
data () {
return {
importHeaders: {token: mytoken}
}
}
}
</script>
后端
@PostMapping("/test")
public R upload(MultipartFile file, HttpServletRequest request) {
String token=request.getHeader("token");
System.out.println("获取token==="+token);
}
10,vue-cli引入公用组件
现在components文件夹下新建一个公用组件vue文件,写好组件之后,在export default 中定义组件名称name值,这是子组件
然后在父组件中引入该子组件进行使用,如下
先自定义个标签
<top></top>
然后在script标签中引入子组件
import Top from "./Top";
然后再export default {} 中把引入的子组件赋给自定义标签即可
components:{
top:Top
}
11,vue-cli父组件向子组件传值
上面第10条只是引入了子组件,但是父组件的变量是传递不到子组件中的,因此需要如下操作
需要传入的变量在data中定义好,然后使用v-bind进行绑定到自定义标签上
<top v-bind:touxiang="touxiang" v-bind:username="username"></top>
这样父组件的变量就传到了子组件,然后子组件使用如下方式接收,这样在子组件中就可以使用变量了,例如:{{username}}
props:['touxiang','username']
-------------------------------------------
个性签名:独学而无友,则孤陋而寡闻。做一个灵魂有趣的人!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,博主在此感谢!
万水千山总是情,打赏一分行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主,哈哈哈(っ•̀ω•́)っ✎⁾⁾!