通过Vue CLI创建
Vue CLI（正在维护…）是 Vue 早期推出的一款脚手架，使用 webpack 创建 Vue 项目，可以选择安装需要的各种插件。
首先要安装脚手架
npm install -g @vue/cli
然后使用
vue create my-project // 打开命令行配置界面
or
vue ui // 打开可视化配置界面
创建项目。
预设配置和插件：
| 选项 | 解释 |
|---|---|
| Choose Vue version | vue版本选择 |
| Babel | 是否兼容低版本浏览器 |
| TypeScript | 是否扩展JavaScript |
| Progressive Web App (PWA) Support | 是否支持渐进式Web应用程序 |
| Router | 是否配置路由 |
| Vuex | 是否配置状态管理模式（相当于本地存储） |
| CSS Pre-processors | 是否配置CSS预处理器 |
| Linter / Formatter | 格式化程序规范选择 |
| Unit Testing | 是否创建单元测试 |
| E2E Testing | 是否创建端到端测试 |
通过create-vue创建
create-vue是一个全新的脚手架工具。
create-vue使用命令
npm create vue@latest
就能快如闪电般初始化好基于vite的Vue3项目。
Vite是一种新型前端构建工具，能够显著提升前端开发体验。
创建并配置项目：
可选功能：
| 选项 | 解释 |
|---|---|
| Project name: | 项目名称，默认值：vue-project。 |
| Add TypeScript? | 是否加入TypeScript组件？默认值：No。 |
| Add JSX Support? | 是否加入JSX支持？默认值：No。 |
| Add Vue Router for Single Page Application development? | 是否为单页应用程序开发添加Vue Router路由管理组件？默认值：No。 |
| Add Pinia for state management? | 是否添加Pinia组件来进行状态管理？默认值：No。 |
| Add Vitest for Unit testing? | 是否添加Vitest来进行单元测试？默认值：No。 |
| Add an End-to-End Testing Solution? | 是否添加端到端测试？默认值No。 |
| Add ESLint for code quality? | 是否添加ESLint来进行代码质量检查？默认值：No。 |
配置完成后执行命令：
cd vue-project
npm install
npm run dev
启动后浏览器打开即可。
通过 CDN 使用 Vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue CDN Example</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
});
</script>
</body>
</html>
5383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
