Vue3项目搭建的详细过程记录

以下是Vue3项目搭建的详细过程记录：

步骤一：安装Node.js和npm

Node.js和npm是Vue3项目开发所必需的基础环境，可以在官网下载安装。

步骤二：安装Vue CLI 4

1. 在终端输入以下命令安装Vue CLI 4：

npm install -g @vue/cli

1. 等待安装完成后，输入以下命令检查Vue CLI是否成功安装：

vue --version

若能正常输出Vue CLI版本信息，则表示安装成功。

步骤三：创建Vue3项目

1. 在终端中进入项目保存的文件夹，输入以下命令创建Vue3项目：

vue create <project-name>

将\替换为你想要创建的项目名。

1. 在接下来的选项中选择“Manually select features”，回车后再选择如下选项：

2. Babel

3. Router
4. Vuex
5. CSS Pre-processors

6. Linter / Formatter

7. 在CSS预处理器选项中选择sass/scss。

8. 在Linter / Formatter选项中选择ESLint + Prettier。

9. 在接下来的选项中选择默认即可。

10. 等待项目创建完成后，输入以下命令进入项目文件夹：

cd <project-name>

将\替换为你创建的项目名称。

步骤四：运行Vue3项目并查看效果

1. 在终端中输入以下命令运行Vue3项目：

npm run serve

1. 等待项目启动完成后，在浏览器中访问http://localhost:8080即可看到Vue3项目的默认界面。

示例如下：

示例一：创建一个名为“myapp”的Vue3项目

1. 安装Node.js和npm

2. 在终端输入以下命令安装Vue CLI 4：

npm install -g @vue/cli

1. 输入以下命令在指定目录下创建Vue3项目“myapp”：

vue create myapp

1. 选择需要的配置，等待项目创建完成。

2. 运行项目：

npm run serve

示例二：在Vue2项目中升级到Vue3

1. 在Vue2项目中安装@vue/cli-service和vue-template-compiler：

npm install --save-dev @vue/cli-service@next
npm install --save-dev vue-template-compiler@next

1. 在项目根目录下创建vue.config.js文件，并添加以下代码：

javascript
module.exports = {
runtimeCompiler: true,
configureWebpack: {
resolve: {
alias: {
'@vue/runtime-core': '@vue/runtime-core/dist/runtime-core.esm-bundler.js'
}
}
}
}

这样就可以使用Vue3基于运行时编译的模式来编译Vue2项目了。

1. 手动升级Vue2中的Vue和Vue Router：

npm uninstall vue vue-router
npm install vue@next vue-router@4

1. 修改Vue模板：

2. 将所有v-bind和v-on的语法改为 : 和 @ 的语法。

3. 将所有的v-for语法改为 v-for="item in items" 的语法。
4. 将所有的v-if和v-else语法改为 v-if="" 语法。
5. 将所有的v-bind:style语法改为 :style="" 语法。

6. 将所有的v-bind:class语法改为 :class="" 语法。

7. 修改Router配置：

```javascript
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'

const routes = [
{
path: '/',
name: 'Home',
component: Home
}
]

const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})

export default router
```

切换为Vue Router 4的语法。

1. 运行项目：

npm run serve

这样就可以在Vue2项目的基础上完成Vue3的升级了。