@TOC
第03节 VUE3环境搭建
[教学内容]
(一)环境搭建
A、传统安装
1、下载源码
如果仅仅只是在项目或者某个文件中简单的使用vue，就可以直接在html中引入如下链接
<script src="https://unpkg.com/vue@next"></script>
可以复制上面的地址到浏览器打开源代码，并复制全部源代码，保存为本地文件js文件，加入到项目中就可以使用了
2、创建项目
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>VUE3</title>
<script src="vue.global.js"></script>
</head>
<body>
<div id="counter">
Counter: {{ counter }}
</div>
</body>
<script>
const App = {
data() {
return {
counter: 0
}
},
mounted() {
setInterval(() => {
this.counter++
}, 1000)
}
}
Vue.createApp(App).mount('#counter')
</script>
</html>
B、CLI安装
1、安装Node
安装Node.js，下载地址：
http://nodejs.cn/download/
查看Node版本
node -v
查看npm版本
npm -v
设置镜像
npm config set registry https://registry.npm.taobao.org --global
查看正在使用的镜像
npm get registry
如果没有切换成功可以手动切换
npx nrm use taobao
2、npm安装CLI
如果之前本地有安装vue2.x的脚手架需要先进行卸载
npm uninstall vue-cli -g
安装vue3
npm install @vue/cli -g
上面两句命令也可以合并一行执行
npm uninstall vue-cli -g && npm install @vue/cli -g
如果需要升级vue
npm update -g @vue/cli
查看vue版本(大V)
vue -V
3、cnpm安装cli
也可以使用cnpm来代替npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm是中国 npm 镜像的客户端
以后就可以使用cnpm来安装插件了
查看cnpm版本信息
cnpm -v
安装CLI脚手架
cnpm uninstall -g vue-cli && cnpm install -g @vue/cli
查看vue版本(大V)
vue -V
4、pnpm安装CLI
pnpm速度比npm更快，可以使用npm的所有命令
安装pnpm
npm install -g pnpm --registry=https://registry.npm.taobao.org
查看pnpm版本
pnpm -v
安装 @vue/cli
pnpm install -g @vue/cli
查看vue版本(大V)
vue -V
5、yarn安装CLI
安装yarn
npm install -g yarn --registry=https://registry.npm.taobao.org
查看yarn版本
yarn -v
安装CLI
yarn global add @vue/cli
6、CLI命令行创建项目
切换到项目路径
D:
cd C:\Users\star\WebstormProjects
创建项目
vue create project02
使用上下键切换选项
Vue CLI v4.5.12
? Please pick a preset: (Use arrow keys)
Default ([Vue 2] babel, eslint) 使用默认配置自动vue2项目
Default (Vue 3 Preview) ([Vue 3] babel, eslint) 使用默认配置自动vue3项目
> Manually select features 自定义创建项目
重点讲一下自定义创建项目
Vue CLI v4.5.12
? Please pick a preset: Manually select features 请选择
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) 空格键选择，a键全选，i键反选
>(*) Choose Vue version 是否自定义选择vue版本
(*) Babel 是否使用babel以支持ES6等语言
(*) TypeScript 是否使用TypeScripyt
(*) Progressive Web App (PWA) Support PWA渐进式web app支持
(*) Router 路由插件
(*) Vuex vue状态管理插件
(*) CSS Pre-processors CSS预处理插件
(*) Linter / Formatter 代码 / 格式检查插件
(*) Unit Testing 是否开启单元测试
(*) E2E Testing 支持 E2E 测试
输入y回车
Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Lint
er, Unit, E2E
? Choose a version of Vue.js that you want to start the project with
2.x
> 3.x (Preview) 选择3
输入y回车
Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Lint
er, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? (y/N) y 输入y
输入y回车
Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Lint
er, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) y
输入y回车
Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Lint
er, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y
选择CSS预处理方式
Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Lint
er, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
选择格式校验模式
Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Lint
er, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only 仅错误预防
ESLint + Airbnb config Airbnb配置
ESLint + Standard config 标准配置
> ESLint + Prettier 两者同时用
TSLint (deprecated) TS的格式检查
选择检查方式
Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Lint
er, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save 保存时检查
( ) Lint and fix on commit (requires Git) 提交时检查
选择单元测试
Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Lint
er, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
Jest
选择E2E端对端测试测试
Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Lint
er, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: (Use arrow keys)
Cypress (Chrome only)
Nightwatch (WebDriver-based)
> WebdriverIO (WebDriver/DevTools based)
选择测试浏览器
Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Lint
er, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: WebdriverIO
? Pick browsers to run end-to-end test on
> Chrome
FireFox
选择 Babel, PostCSS, ESLint 等自定义配置的存放位置
Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Lint
er, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: WebdriverIO
? Pick browsers to run end-to-end test on
> Chrome
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files 在专用的配置文件中
In package.json
是否保存为预设
Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Lint
er, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: WebdriverIO
? Pick browsers to run end-to-end test on Chrome
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n
如果报错,管理员权限打开执行：
npm install --global --production windows-build-tools
完成后开始安装cli插件
Vue CLI v4.5.12
✨ Creating project in C:\Users\star\WebstormProjects\project02.
⚙️ Installing CLI plugins. This might take a while...
安装成功后
...
added 53 packages from 36 contributors in 9.62s
74 packages are looking for funding
run `npm fund` for details
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project project02.
👉 Get started with the following commands:
$ cd project03
$ npm run serve
7、图形界面创建项目
vue ui
过程如上，只是全部操作在浏览器中都有图形界面
5、安装运行
cd project04
npm run serve
C、webpack安装
1、安装cli-init
npm i -g @vue/cli-init
2、创建项目
vue init webpack project05
选择选项
? Project name project05
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
完成后
# Project initialization finished!
# ========================
To get started:
cd project05
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
3、安装运行
cd project05
npm run dev
D、Vite安装
Vite是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。可以使用 Vite 快速构建 Vue 项目。
1、创建项目
npm init @vitejs/app project06
选择一个模板
? Select a template: ...
vanilla
> vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts
svelte
svelte-ts
2、安装运行
cd project06
npm install
npm run dev
当然也可以直接指定模板安装
# npm 6.x
npm init @vitejs/app my-vue-app --template vue
支持的模板预设包括：
vanilla
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts
E、Vite-yarn安装
使用yarn创建项目
yarn create @vitejs/app project07
选择模板
? Select a template: ...
vanilla
> vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts
svelte
svelte-ts
完成之后
cd project07
yarn
yarn dev
(二)开发软件
A、安装VSCode
1、下载安装
下载地址
https://code.visualstudio.com/
2、设置中文
按快捷键ctrl + shift + p在弹出来的窗口中输入configure display language选中回车，在左边列出来的列表中选择Chinese安装即可。最后重启VSCode生效。
B、安装插件
安装完成后打开，并安装Vetur插件
1、安装Vetur插件
Vetur插件是Vue官方提供的VSCode完美支持Vue的插件，提供对Vue语法良好支持。包括语法高亮、语法代码提示、语法lint检测等
点击VSCode节目最左边的最下面的图标
输入vetur后，在搜索出来的列表中选择vetur右下角的安装按钮即可安装。
使用快捷键：
-
Alt+Shift+F （格式化全文）
-
Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）
常用的插件还有几个
-
Path Intellisense(必备)
自动提示文件路径，支持各种快速引入文件 -
Prettier - Code formatter(必备)
代码格式化 -
open in browser (必备)
支持快捷键与鼠标右键快速在浏览器中打开html文件 -
npm Intellisense(node必备)
import、require npm模块是自动补全 -
IntelliSense for CSS class names (推荐)
智能提示 css 的 class 名 -
Class autocomplete for HTML(必备)
智能提示HTML class =“”属性
-
HTML Snippets (必备)
智能提示HTML标签，以及标签含义
-
HTML CSS Support(必备)
让 html 标签上写class 智能提示当前项目所支持的样式 -
Auto Close Tag(必备)
自动闭合HTML/XML标签 -
Auto Rename Tag(必备)
自动完成另一侧标签的同步修改 -
GitLens (使用git的必备)
Git提示，方便查看git日志，git重度使用者必备 -
Vue VSCode Snippets(Vue必备)
Vue 语法片段扩展 -
Beautify (必备)
格式化 html ,js,css，快捷键ctrl + b
-
JavaScript(ES6) code snippets(必备)
ES6语法智能提示以及快速输入，除js外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间 -
Bracket Pair Colorizer(必备)
给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色 -
jQuery Code Snippets (推荐)
jQuery代码智能提示
-
ESLint (推荐)
js语法纠错，可以自定义配置，不过配置较为复杂，建议使用网上一些广泛使用的eslint配置
- language-stylus(推荐)
stylus语法支持
C、导入项目
打开 vscode 工具 , 文件 - 打开文件夹 ，选择项目所在的路径
按 Ctrl + ~ 键 ( Esc 下面的那个 ) 调出终端 ，执行 相关命令即可
(三)Vue3项目简介
这里使用Vite创建项目，目录结构：
- node_modules
- public
- src
|- assets
|-logo.png
|- components
|- HelloWord.vue
|- APP.vue
|- main.js
- index.html
- package-lock.json
- package.json
- vite.config.js
|- router
| |- index.js
|- views
|- Home.vue
|- Contact.vue
APP.vue代码说明：
<template>
<!-- 直接使用HelloWorld组件 -->
<HelloWorld msg="Vue 3 + Vite" ref="hw"/> <!-- hw在这里代表HelloWorld组件 -->
</template>
<script setup>
import { onMounted, ref } from 'vue'
import HelloWorld from './components/HelloWorld.vue' // import导入组件后可以直接在模板种使用
const hw = ref(null)
onMounted(()=>{
// ref属性引用的数据在setup种还没有初始化，可以在mounted中使用
hw.value.exposeMethod() // 使用组件中暴露出来的API函数
})
</script>
Helleworld代码说明
<template>
<h1>{{ msg }}</h1>
<button @click="state.count++">count is: {{ state.count }}</button>
<button @click="myClick()">count is: {{ state.count }}</button>
</template>
<script setup>
// 1、import导入定义组件输入功能和响应式函数
import { defineProps, reactive } from 'vue'
// 2、自定义组件输入属性，可在外部组件直接使用
const props = defineProps({
msg: String
})
// 3、自定义组件事件，可在外部组件直接使用
const emit = defineEmit(["testClick"])
// 组件中使用自定义事件"testClick"
const myClick = () => {
emit("testClick")
}
// 4、将数据变成响应式数据，当数据发生变化时UI也会自动更新，reactive是用于复杂数据类型，ref用于基本数据类型
const state = reactive({ count: 0 })
// 5、引用上下文(常用函数有：attrs、slots、emit、expose)
const context = useContext()
context.emit("testClick")
// 自定义暴露对象，可供外部组件使用
context.expose({
exposeMethod(){
console.log("组件暴露的API")
}
})
</script>
vite.config.js代码说明：
import { defineConfig } from 'vite' // 配置智能感知，可以获得配置项的代码提示功能
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
})
[作业实验]
- 搭建Vue3的环境，并且使用VSCode打开一个Vue3 的项目，并运行。
364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
