一 使用 vue cli创建
1 首先需要保证vue-cli版本在4.5.0往上 在终端执行命令 vue -V查看版本
image.png
2 如果低于 4.5.0 执行 npm install -g @vue/cli 升级版本
3 创建项目 执行 vue create 项目名,然后选择vue3选项
截图.png
执行结果
截图2.png
4 进入项目文件夹 执行npm run serve 运行项目
截图3.png
二 使用vite 创建
什么是vite 新一代前端构建工具
优势:
开发环境中 无需打包 可以快速的冷启动
轻量快速热重载
按需编译
详细参见 vite 官网 :https://vitejs.cn
创建步骤:
1 创建项目 执行 npm init vite-app 项目名
截图4.png
2 进入项目文件夹
3 安装依赖 执行 npm install
4 运行 执行 npm run dev
截图5.png

vue3两种构建方式
vite构建vue3项目

1.#npm init vite@latest

2.#Ok to proceed?(y) y 

3.#Project name: vite-demo //项目名称

4.#Vue //选择vue

5.#Select a variant: TypeScript //加TypeScript

vue脚手架构建vue3项目

1.#npm init vue@latest

2.Project name:vue-demo

3.Add TypeScript?:yes

4.Add JSX Support?:yes

5.Add Vue Router for Single Page Application development?:yes

6.Add Pinia for state management?:yes

7.Add Vitest for unit Testing?:yes

8.Add Cypress for end-to-end testing?:yes

9.Add ESLint for code quality?:yes

10.Add Prettier for code formatting?:yes 

 vue-cli安装及使用(旧版本)    
* 全局安装 vue-cli  
`$npm install --global vue-cli`  
`$cnpm install --global vue-cli`  
* 创建一个基于webpack模板的新项目    
`$vue init webpack my-project    --标准`  
`$vue init webpack-simple my-project    --简易模式 `    
* 安装依赖   
`$cd my-project`  
`cnpm instll / npm install`   
`$npm run dev`    

## 另一种vue-cli3安装及使用   
* 检查版本  
`vue --version`  
* 如果想用最新的cli3,那么需要先卸载vue-cli    
`$npm uninstll vue-cli -g`       
* 全局安装 vue-cli  
`$npm install --global @vue/cli`  
`$cnpm install --global @vue/cli`  
`$yarn global add @vue/cli`  
* 创建一个新项目,必须cd到对应的一个项目里面    
`$vue create hello-world `  
`$cd hello-world`  
* 安装依赖   
`cnpm instll / npm install`  
`运行:npm run serve`   
`编译:npm run build`  

## vue-cli使用注意事项
* 如果vue-cli的版本小于3,那么将不能使用vue-cli创建项目  
  <font color=red size=72>
  vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.    
  You may want to run the following to upgrade to Vue CLI 3:  

  `npm uninstall -g vue-cli`  
  `npm install -g @vue/cli`  
  </font>

* 先卸载当前的版本npm uninstall -g vue-cli  

* 安装3版本npm install -g @vue/cli
在国内下载npm包的时候,是非常慢的,所有推荐大家采用淘宝的镜像,使用下面的命令即可  
`npm install -g cnpm --registry=https://registry.npm.taobao.org`   

## vue路由配置  
* 1.安装  
  `npm install vue-router --save / cnpm install vue-router --save`   
* 2.引入并Vue.use(VueRouter) (main.js)   
  `import VueRouter from 'vue-router'`  
  `Vue.use(VueRouter)`  
* 3.配置路由  
  3.1创建组件并引入组件  
  3.2定义路由  
  `const router = [`  
     `{path: '/home',components:Home},`  
     `{path: '/news',components:News},`  
     `{path: '*', redirect: '/home'} /*默认跳转路由*/`     
     `]`  
  3.3实例化VueRouter  
  `const router = new VueRouter({`  
      `routes //(缩写)相当于routers:routes`  
      `})`  
  3.4挂载  
  `new Vue({`  
      `el:'#app',`  
      `router,`  
      `render:h=>h(App)`  
      `})`  
  3.5根组件的模板里面放上这句话  
  `<router-view></router-view>`  
  一般情况是要配合router-link使用  
  `<router-link to="/home">首页</router-link>`    
  `<router-link to="/news">新闻</router-link>`