npm uninstall -g vue-cli //卸载2.x版本脚手架
1.Vue Cli官方网站
https://cli.vuejs.org/zh/guide/
2.安装vue Cli
npm install -g vue-cli
#### []( )3、第一个vue脚手架项目
> Vue-cli目录结构
\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2QDNftWz-1627871421740)(Vue实战笔记(三).assets/image-20210721155403325.png)\\
1.创建vue脚手架第一个项目
vue init webpack 项目名
2.创建第一个项目
hello ------------->项目名
-build ------------->用来使用webpack打包使用build依赖 构建一些依赖文件
-config ------------->用来做整个项目配置目录 主要用来对 开发 测试 环境进行配置
-node_modules ------>用来管理项目中使用依赖
-src ------>用来书写vue的源代码[重点]
+assets ------>用来存放静态资源 [重点]
components ------>用来书写Vue组件 [重点]
router ------>用来配置项目中路由[重点]
App.vue ------>项目中根组件[重点]
main.js ------>项目中主入口[重点]
-static ------>其它静态
-.babelrc ------> 将es6语法转为es5运行
-.editorconfig ------> 项目编辑配置
-.gitignore ------> git版本控制忽略文件
-.postcssrc.js ------> 源码相关js
-index.html ------> 项目主页
-package.json ------> 类似与pom.xml 依赖管理 jquery 不建议手动修改
-package-lock.json ----> 对package.json加锁
-README.md ----> 项目说明文件
3.如何运行在项目的根目录中执行
npm run dev 运行前端系统
4.如何访问项目
http://localhost:8080
5.Vue Cli中项目开发方式
注意: 一切皆组件 一个组件中 js代码 html代码 css样式
1. VueCli开发方式是在项目中开发一个一个组件对应一个业务功能模块,日后可以将多个组件组合到一起形成一个前端系统
2. 日后在使用vue Cli进行开发时不再书写html,编写的是一个个组件(组件后缀.vue结尾的文件),日后打包时vue cli会将组件编译成运行的html文件
> rc 目录
`src`目录是项目的源码目录,所有代码都会写在这里!
> main.js
项目的入口文件,我们知道所有的程序都会有一个入口
// The Vue build version to load with the import
command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue’ // 引入VUE核心库
import App from ‘./App’ // 引入一个当前目录下的名字为App.vue的组件
import router from ‘./router’
Vue.config.productionTip = false // 是否要在生产环境当中给予提示功能。
/* eslint-disable no-new */
new Vue({
el: ‘#app’,
router,
components: { App },
template: ‘’
})
* `import Vue from 'vue'`:ES6 写法,会被转换成 require(“vue”); (require 是 NodeJS 提供的模块加载器)其实就相当于
`<script src = "vue"></script>`
* `import App from './App'` :意思同上,但是指定了查找路径,./ 为当前目录
* `Vue.config.productionTip = false`:关闭浏览器控制台关于环境的相关提示
* `new Vue({})`:实例化 Vue
* `el: '#app'`:查找 index.html 中 id 为 app 的元素
* `template: '<App/>'`:模板,会将 index.html 中替换为
* `components: { App }` :引入组件,使用的是 import App from ‘./App’ 定义的 App 组件;
> App.vue
<img src="./assets/logo.png">
<h1>自定义脚手架</h1>
<!--展示路由-->
<router-view/>
* template:HTML 代码模板,会替换 < App /> 中的内容
* export default{…}:导出 NodeJS 对象,作用是可以通过 import 关键字导入
* name: ‘App’:定义组件的名称
* components: { HelloWorld }:定义子组件
* 在hello,Vue中,关于 < style scoped> 的说明:CSS 样式仅在当前组件有效,声明了样式的作用域,是当前的界面私有的! 不加代表全局有效。
> index.js 配置路由
import Vue from ‘vue’
import Router from ‘vue-router’
import HelloWorld from ‘@/components/HelloWorld’
Vue.use(Router) //注册路由 new Vue({router,})
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
> HelloWorld.vue
#### []( )4、如何开发Vue脚手架
**注意:在Vue cli 中一切皆组件**
1、我们在HelloWorld.vue的同级目录下新建两个Student和User组件。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-liUgTnMu-1627871421742)(Vue实战笔记(三).assets/image-20210721204921996.png)]](https://img-blog.csdnimg.cn/41464533b7cf4b1a82b403952aaba234.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTI4NQ==,size_16,color_FFFFFF,t_70)
* * *
2、`Student.vue`和`User.vue`组件
`Student.vue`组件
<h1>hello world {{msg}} </h1>
<h3>我是学生管理的主页</h3>
`User.vue`组件
<h1>hello world {{msg}} </h1>
<h3>我是用户管理的主页</h3>
3、在`App.vue`组件中引入这两个组件的链接,进行路由切换
<img src="./assets/logo.png">
<h1>自定义脚手架</h1>
<router-link to="/">主页</router-link>
<router-link to="/user">用户管理</router-link>
<router-link to="/student">学生管理</router-link>
<!--展示路由-->
<router-view/>
4、启动项目,测试一下
![](https://img-blog.csdnimg.cn/64d34ae67a4241e796493e5a35b48df7.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTI4NQ==,size_16,color_FFFFFF,t_70)
[]( )17、在脚手架中使用axios
----------------------------------------------------------------------------------
### []( )17.1、安装axios
1.安装axios
npm install axios --save
2.配置main.js中引入axios
import axios from 'axios';
Vue.prototype.$http=axios;
3.使用axios
在需要发送异步请求的位置:this.$http.get("url").then((res)=>{}) this.$http.post("url").then((res)=>{})
* * *
[]( )18、Vue Cli脚手架项目部署
------------------------------------------------------------------------------------
1.在项目根目录中执行如下命令:
npm run build
注意:vue脚手架打包的项目必须在服务器上运行不能直接双击运行
2.打包之后当前项目中变化
在打包之后项目中出现dist目录,dist目录就是vue脚手架项目生产目录或者说是直接部署目录
[]( )19、webstorm开发vue cli项目
-----------------------------------------------------------------------------------------
### []( )19.1、简介
WebStorm 是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。
![在这里插入图片描述](https://img-blog.csdnimg.cn/b13e104123ae41f9857c0f47d2ea5077.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTI4NQ==,size_16,color_FFFFFF,t_70)
### []( )19.2、安装
官网地址:http://www.jetbrains.com/webstorm/
选择好安装路径
![](https://img-blog.csdnimg.cn/5211f173b1ab4c8588fc09fb1c8c26d1.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTI4NQ==,size_16,color_FFFFFF,t_70)
### []( )19.3、使用webstorm
webstorm和idea同属于一家开发公司,因此使用方式基本一样。
> 使用webstorm初始化项目
1、我们新建一个webstromcodes项目。
2、打开Terminal终端,输入`vue init webpack vue_day5` ,进行`vue-day5`项目的创建。
3、接下来的步骤和使用Vue Cli脚手架开发一样。
4、显示如下页面,项目初始化成功。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aCUzAuOB-1627871421744)(Vue实战笔记(三).assets/image-20210722212053257.png)]](https://img-blog.csdnimg.cn/549231dbd2db4cb3b7db8333b59b8ace.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTI4NQ==,size_16,color_FFFFFF,t_70)
可以看下目录结构,和使用Vue CLI脚手架开发目录结构一致。
![](https://img-blog.csdnimg.cn/59310520ed554033ba087720cd49004d.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTI4NQ==,size_16,color_FFFFFF,t_70)
5、在Terminal终端输入`cd vue_day5`,进入当前项目根目录,项目目录中包含`package.json`才是根目录,可以输入`dir`查看当前目录结构。
6、最后我们输入`npm run dev`启动项目,出现如下界面:
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-83zniwev-1627871421745)(Vue实战笔记(三).assets/image-20210722212849013.png)]](https://img-blog.csdnimg.cn/a20796d293d24a1c9bf6421a37954341.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTI4NQ==,size_16,color_FFFFFF,t_70)
说明项目成功运行!!!输入http://localhost:8080 ,打开浏览器查看一下,出现默认界面。
> main.js 项目中主入口
//引入vue.js
import Vue from ‘vue’
//引入app.vue 组件
import App from ‘./App’
//引入router目录中 /index.js
import router from ‘./router’
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: ‘#app’, //指定vue实例作用范围
router,
components: { App },
template: ‘’
})
### []( )19.4、开发vue cli项目(一)
**1、Student组件**
template>
<h1>{{ msg }}</h1>
**4、index.js**
import Vue from ‘vue’
import Router from ‘vue-router’
//@ 代表src目录
import HelloWorld from ‘@/components/HelloWorld’
import User from ‘@/components/User’
import Student from “…/components/Student”;
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/user',
name: 'user',
component: User
},{
path: '/student',
name: 'student',
component: Student
}
]
})
启动项目测试一下:
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ylfeDATy-1627871421747)(Vue实战笔记(三).assets/image-20210724091247957.png)]](https://img-blog.csdnimg.cn/66afcbc7e6e04ff8916f7e9ce53aeb97.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTI4NQ==,size_16,color_FFFFFF,t_70)
成功查询到数据!!!
### []( )19.5、开发vue cli项目(二)
[]( )20、VueX 状态管理
-------------------------------------------------------------------------------
### []( )20.1、简介&安装
1.简介
- Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
2.安装vuex
- npm install vuex --save
3.创建vue cli中创建store文件夹
4.在stroe中创建index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
//1.安装vuex
Vue.use(Vuex);
//2.创建store对象
const store = new Vuex.Store({
});
//3.暴露store对象
export default store;
5.在main.js中引入stroe并注册到vue实例
import Vue from 'vue'
import App from './App'
import router from './router'
# 最后
各位读者,由于本篇幅度过长,为了避免影响阅读体验,下面我就大概概括了整理了
**[CodeChina开源项目:【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频】](https://codechina.csdn.net/m0_60958482/java-p7)**
![](https://img-blog.csdnimg.cn/img_convert/b4d05fe6c4e6c4644885b688cc4b83d8.png)
![](https://img-blog.csdnimg.cn/img_convert/f60c07bf77518209bac3e83d62417a5e.png)
![](https://img-blog.csdnimg.cn/img_convert/fc5eead9998a8146314eba0c437ed046.png)
t_70)
成功查询到数据!!!
### []( )19.5、开发vue cli项目(二)
[]( )20、VueX 状态管理
-------------------------------------------------------------------------------
### []( )20.1、简介&安装
```
# 1.简介
- Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
# 2.安装vuex
- npm install vuex --save
# 3.创建vue cli中创建store文件夹
# 4.在stroe中创建index.js文件
import Vue from ‘vue’
import Vuex from ‘vuex’
//1.安装vuex
Vue.use(Vuex);
//2.创建store对象
const store = new Vuex.Store({
});
//3.暴露store对象
export default store;
# 5.在main.js中引入stroe并注册到vue实例
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
最后
各位读者,由于本篇幅度过长,为了避免影响阅读体验,下面我就大概概括了整理了
CodeChina开源项目:【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频】
[外链图片转存中…(img-2UBTQnjD-1630855215051)]
[外链图片转存中…(img-G2NwikIs-1630855215053)]
[外链图片转存中…(img-roZsWj8W-1630855215054)]