vue3.0搭建与安装

 

简述:1、删除与安装 vue-cli2 和 vue-cli3如果你是npm install -g vue-cli装的,就npm uninstall -g vue-cli删。 如果你是npm install -g @vue/cli装的,就npm uninstall -g @vue/cli删。2、先将npm的仓库地址改为淘宝镜像(这样会快很多)执行命令:npm config set registry https://registry.npm.taobao.org --global,然后再安装:执行命令:npm install -g @vue/cli3、vue3.0项目创建vue create 搭建新项目名cd 新项目名 :进入项目然后启动项目运行项目:npm run serve

详情:

1、删除与安装 vue-cli2 和 vue-cli3

如果你是 npm install -g vue-cli 装的,就 npm uninstall -g vue-cli 删。
如果你是 
npm install -g @vue/cli 装的,就 npm uninstall -g @vue/cli 删。

2、先将npm的仓库地址改为淘宝镜像(这样会快很多)
执行命令:npm config set registry https://registry.npm.taobao.org --global,
然后再安装:
执行命令:npm install -g @vue/cli  or yarn global add @vue/cli

执行命令:vue -V,查看版本号

3、vue3.0创建

(1)vue3.0项目搭建环境

vue create 搭建新项目名

cd 新项目名 :进入项目然后启动项目

运行项目:npm run serve

(2)vue使用vite搭建项目环境

npm init vite-app <project-name>

cd <project-name>

根据控制台的提示执行:

npm install / yarn

npm run dev / yarn dev


4、vue3.0常用的安装插件及使用

(1)element-ui和element-plus安装和使用

安装:npm i element-ui –s

然后main.js文件加入下面三句就可以使用了

import Element from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)


(2)vue-router安装和使用

安装:npm install vue-router

引入:main.js文件加入下面两句,相关设置都在src->router文件夹里

import VueRouter from 'vue-router'

Vue.use(VueRouter)

(3)Vuex安装和使用

安装:npm install vuex –save

引入:main.js加入下面两句,相关设置都在src->store文件夹里

import Vuex from 'vuex'

Vue.use(Vuex)

(4)Axios安装和使用

安装:npm install axios

哪里要用哪里引用  import Axios from 'axios'

哪里要用就那里引用  import Axios from 'axios'