vue3的安装及项目建立

1.安装css

 npm install -g @vue/clivue

使用淘宝镜像安装vuex

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

2.建立项目npm

 vue create vue3demoelement-ui

输出以下信息:babel

 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
 ​单元测试

选择最后一项,自定义测试

avatar

按空格进行勾选优化

  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测试

avatar

选好后回车

avatar

这一步,是选择路由的模式,y选择history模式,n 选择hash模式(url路径带#号)

avatar

选择css预编译器,根据我的喜爱选择

avatar

设置配置信息存放文件

avatar

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

回车开始安装

image

进入 vue3demo目录

npm run serve 运行项目

image

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

image

项目初始化成功!

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

image

引用基于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

至此回车开始安装

image

image

 npm run serve

相关文章
相关标签/搜索