Vue3介绍和安装
一、介绍
Vue是一套用户构建用户界面的渐进式框架- 官网：https://cn.vuejs.org
- 需要有
npm、webpack基础，会javascript的ES6 语法，有异步网络请求axios基础 Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合- Vue 的两大核心
- 响应式的数据绑定：当数据发生改变，视图可以自动更新，可以不用关心 dom 操作，而专心数据操作
- 可组合的视图组件：把视图按照功能切分成若干基本单元，组件可以一级一级组合整个应用形成倒置组件树，可维护，可重用，可测试
二、安装方法
1、cdn 安装(直接添加链接)
- 对于生产环境，链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏
- BootCDN：https://www.bootcdn.cn
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.cjs.js"></script>
- 示例
<!-- 1、挂载html标签的id上 -->
<div id="app">{{title}}</div>
<script>
const app = Vue.createApp({
data() {
return {
title: "大傻胖",
};
},
}).mount("#app");
// 可以用app变量访问标题
console.log(app.title);
</script>
<!-- 2、执行方法 -->
<div id="app">{{title}} {{one()}}</div>
<script>
const app = Vue.createApp({
data() {
return {
title: "我是大傻胖"
};
},
methods: {
one() {
console.log(this.title);
return "我是one方法";
}
},
}).mount("#app");
console.log(app.title);
console.log(app.one());
</script>
data()中存放数据，method中存放方法
2、Vue cli 脚手架安装
- 使用官方的
CLI来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置 (例如，热重载、保存时的提示等等)
官网： https://cli.vuejs.org/zh/
# 1、安装vue-cli脚手架，全局安装
npm install -g @vue/cli
# 2、一次性安装3个vue-cli服务
npm install -g @vue/cli @vue/cli-service-global @vue/cli-service
# 如果安装失败，可能是没有权限，`macbook` 命令行前加 `sudo`
# 3 安装完成后，需要配置环境变量
我的电脑-》右击-》属性-》高级系统设置-》环境变量-》系统变量-》Path-》编辑-》新建(赋值nodejs目录下的node_global路径)
# 4.查看版本
vue 命令是 vue-cli 的命令
vue -V 或 vue --version
3.升级
npm update -g @vue/cli
4. 卸载
npm uninstall vue-cli -g
4.问题
VS Code中powershell无法运行cnpm, vue等命令
windows运行-》cmd-》输入powershell-》命令行输入：set-ExecutionPolicy RemoteSigned-》命令行输入：A-》回车-》重启VS code
三.手架介绍
- 默认已经帮我买搭建好了一套利用
Webpack管理vue项目的结构 Vue CLI是一个基于Vue.js进行快速开发的完整系统Vue CLI是一个全局安装的npm包，提供了终端里的vue命令
介绍-文档：https://cli.vuejs.org/zh/guide/
- 通过
@vue/cli实现的交互式的项目脚手架 - 通过
@vue/cli + @vue/cli-service-global实现的零配置原型开发
运行时依赖(@vue/cli-service)，该依赖：可升级； - 基于
webpack构建，并带有合理的默认配置； - 可以通过项目内的配置文件进行配置；
可以通过插件进行扩展。 - 一个丰富的官方插件集合，集成了前端生态中最好的工具
- 一套完全图形化的创建和管理
Vue.js项目的用户界面
四、创建一个项目
# 1、创建一个项目
vue create vuecli
# 2、选择：用vue2，vue3，手动配置。 vue2，vue3除了基本语法， 还有下面2个功能
# 2.1、babel 把es6的语法，转成es5的语法，可以做到兼容
# 2.2、eslint 语法检查，约束你的代码习惯
please pick a preset：
Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
Manually select features
# 3、手动选择功能：Choose Vue version、Babel、CSS Pre-processors
Check the features needed for your project:
Choose Vue version // 版本
Babel // 把es6的语法，转成es5的语法，可以做到兼容
TypeScript // 由微软开发的自由和开源的编程语言，是 JavaScript 的一个超集，支持es6语法
Progressive Web App (PWA) Support // Web APP开发
Router // 路由
Vuex // 状态管理器
CSS Pre-processors // css预处理器：三种流行的CSS预处理器：Sass、LESS 和 Stylus
Linter / Formatter // 代码语法检查器(eslint)
Unit Testing // 单元测试
E2E Testing // e2e(端到端)测试
# 4、选择版本：3.x
Choose a version of Vue.js that you want to start the project with:
2.x
3.x
# 5、选择css预处理器版本：dart-sass，官方目前主力推dart-sass
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS (with dart-sass)
Sass/Scss (with node-sass)
Less
Stylus
# 6、配置文件：In package.json
Where do you prefer placing config for Babel, ESlint, etc.?
In dedicated config files // 独立配置文件
In package.json // 放在package.json里
# 7、是否保持此项目配置：保存的话，起个名字
Save this as a preset for future projects?
y // 保存
n // 不保存
# 4、选择版本：3.x
Choose a version of Vue.js th
at you want to start the project with:
2.x
3.x
# 5、选择css预处理器版本：dart-sass，官方目前主力推dart-sass
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS (with dart-sass)
Sass/Scss (with node-sass)
Less
Stylus
# 6、配置文件：In package.json
Where do you prefer placing config for Babel, ESlint, etc.?
In dedicated config files // 独立配置文件
In package.json // 放在package.json里
# 7、是否保持此项目配置：保存的话，起个名字
Save this as a preset for future projects?
y // 保存
n // 不保存
五、运行项目
npm run serve
六、目录结构
