vue3的安装及项目创建

1.安装

 npm install -g @vue/cli

使用淘宝镜像安装

 npm install -g @vue/cli cnpm --registry=https://registry.npm.taobao.org

2.创建项目

 vue create vue3demo

输出如下信息：

 Vue CLI v4.0.4
 ┌─────────────────────────────────────────┐
 │                                         │
 │   New version available 4.0.4 → 4.0.5   │
 │   Run npm i -g @vue/cli to update!     │
 │                                         │
 └─────────────────────────────────────────┘
 ​
 ? Please pick a preset:
  firstConfig (stylus, babel, router, vuex)
  default (babel, eslint)
 > Manually select features
 ​

选择最后一项，自定义

按空格进行勾选

1. Bable 预编译 勾选
2. TypeScript 微软做的，用到的勾选
3. Progressive Web App (PWA) Support 优化用的，用到的勾选
4. Router 路由 勾选
5. Vuex 勾选
6. CSS Pre-processors CSS预处理器 勾选
7. Linter/Formatter 代码格式化
8. Unit Testing 单元测试
9. E2E Testing E2E测试

选好后回车

这一步，是选择路由的模式，y选择history模式，n 选择hash模式（url路径带#号）

选择css预编译器，根据个人喜好选择

设置配置信息存放文件

是否保存本次选择的特性，方便下次直接创建

回车开始安装

进入 vue3demo目录

npm run serve 运行项目

打开网址： http://localhost:8082/

项目初始化成功！

用vsCode打开项目,项目已经帮我们导入了store,router等基本组件

引用基于vue-cli@3的Element组件

这里要引用vue-cli@3下的element-ui组件

 vue add element

会出现以下提示

 How do you want to import Element? (Use arrow keys)

为了方便使用，选择第一个fully import

1.  1. ? Do you wish to overwrite Element's SCSS variables? Yes
    2. Choose the locale you want to load zh-CN

至此回车开始安装

 npm run serve