Vue

几种Vue创建项目方式的比较

几种Vue创建项目方式的比较

使用CDN

适用于快速原型测试或学习。

1
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

使用Vue的命令行工具（CLI）

安装Vue@cli

1
2
3
4
5
# vue2
npm install -g vue-cli

# vue3
npm install -g @vue/cli

使用CLI创建项目

Vue2.x

1
2
3
vue init <template-name> <project-name>
npm i
npm run dev

Vue3.x

  • 安装新增TypeScript配置选项
  • 新增图形化安装方法
  • 保留了2.x之前的安装方法
1
2
3
4
5
6
7
8
9
vue create 项目名称
npm i
npm run serve
# 使用vue ui创建新项目(3.x新增)
vue ui
# 使用旧版（2.X）创建
npm install -g @vue/cli-init
# 'vue init'的运行效果与‘vue-cli@2.x’相同
vue init webpack projectname

使用Vue ui

运行命令：

1
vue ui

然后就可以在浏览器中使用ui界面来创建和管理vue项目了

使用Vite

推荐使用yarn

1
2
3
4
5
6
7
8
9
10
11
# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue