vue全家桶搭建项目和入门理解
vue全家桶搭建项目和入门理解
由于目前需要做一个博客项目，所以需要先搭建前端，springboot + vue是一个不错的选择，所以这篇博客写的是我目前对vue的理解。
vue脚手架
其实这里没有网上说的这么复杂。完全可以这么理解，他们说的一些vue知识属于框架,类似于bootstrap那种的(其实并不是，不过你可以先这么理解)，需要你去理解一些标签啊，语法啊那种东西，然后这个脚手架是你搭建的一个前端项目，这里你可以理解成java后端的那种搭环境，比如spring啊什么的。
初始化vue脚手架(vue-cli 2.x)
在保证自己电脑上安装了node.js前提下，我们需要安装vue环境和webpack.
npm install vue
npm install -g vue-cli #安装脚手架
这里的webpack其实就是一个工具将你写的vue打包成html,js,css文件
- 安装一个vue-cli项目
vue init webpack [ProjectName]
这里会下载一大堆东西，然后出现一些让你确认的东西，比如说是项目名啊，作者啊，路由啊(这个一会讲)，一直敲回车就ok。
- 项目目录结构
安装完成后，我们的项目结构是这个样子的
package.json -> 这个是项目必须的，每次安装插件什么的都需要这个json，你可以把它想象成gradle或者maven
index.html -> 网页的门面，后面的初始化Vue对象也是初始在了这个地方
test -> 单元测试，相当于Junit
static -> 这个是在webpack打包后直接将里面的东西直接转移到了dist/static
src -> 整个项目基本上你都要在里面写东西
src-> assets -> 项目的静态资源，存放一些js,css,图片什么的。
node_modules -> 你下载的一些插件都在里面，比如路由,jQuery
config ->配置文件包
build ->项目启动的一些包，比如端口什么的
- 项目启动
npm run dev # 启动项目
npm run build # 将你写的项目打包成html,一般都是在项目写完的时候这么干
初始化vue脚本(@vue/cli 3.x)
到我目前开始修改之前vue的博客的时候 vue cli 已经升级到4.x,但是因为4.x是基于Vue 3.x版本的，和我之前使用的Vue2.x有很大的区别。所以现在暂时先使用3.x。
安装
npm install @vue/cli 3.11.0
vue -V # 只要不是什么4.x就ok
创建项目
vue create [name]
安装必要插件
- 首先是路由和vuex,由于一开始创建项目的时候提示我们是否安装路由了，所以这里我不需要安装，直接安装vuex.
npm install vuex --save # save 是保存到本地的意思
上面都是Vue Cli 2.x 必须安装的，VueCli3 在创建项目时可以自定义。
vue路由器入门
我们要清楚，vue里面切换页面是用vue路由来实现的，我们初始创建的项目里面是存在src/router/router.js这个文件，这里面的文件是我们所有配置路由的文件，目前我的里面随便写了一个页面，具体代码如下:
首先是我们在compnents/下面随便创建一个页面
<template>
<Input v-model="value" placeholder="Enter something..." style="width: 300px" />
</template>
<script>
export default {
data () {
return {
value: ''
}
}
}
</script>
上面的代码是抄自iview官网的一个input标签
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: () => import('@/components/HelloWorld')
},
{
path: '/login',
name: 'login',
component: () => import('@/components/login')
}
]
})
mode:'history'是将网页上的#删除掉。
