登录
当前位置： 首页 > 工具软件 > preact-cli > 使用案例 >

Vue3各种方式项目搭建npm、cnpm、pnpm、cli3\vite、VSCode软件安装汉化中文课件教程

巢安澜
2023-12-01

@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()]
})

[作业实验]

  1. 搭建Vue3的环境，并且使用VSCode打开一个Vue3 的项目，并运行。
 类似资料：

相关阅读

maven搭建java ee项目图文教程以编程方式安装提供其版本的NPM软件包无法安装npm软件包“ npm ERR！errno -4048”IDEA+Gradle搭建Spring Boot项目图文教程Centos7.2 编译安装方式搭建 phpMyAdmin

相关文章

小米武汉软件一面软件测试教程.NET Core项目文件中望软件 C++ 武汉二面 烤面筋博思软件项目经理面经

相关问答

npm软件包未安装，因此出现此错误PHPBrew-安装的各种问题模块化项目中的Maven安装安装新软件包时npm强制解决方案不起作用visio - 安装软件问题？

相关文档

Django 搭建简易博客教程爬虫课件Vite 中文文档Java 国际化 中文教程各种算法的 Python 实现方案
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.