vue3脚手架安装配置与使用

安装脚手架

vue2安装讲解
以安装VUE3为案例

1 安装配置前准备的工作

 0  在搭建vue的开发环境之前首先要安装node.js(详情参考菜鸟教程的node安装)
    1.1  安装完成node后 打开docs管理工具 看是否安装成功 输入**node-v** 回车 查看安装的版本号
      
      1.2  安装cnpm(简称淘宝镜像) 的命令  因为npm的命令运行速度慢 推荐cnpm进行操作 输入**$ npm install -g cnpm --  registry=https://registry.npm.taobao.org**  进行安装
       
      1.21  如果想使用yarn命令 可以全局安装一下
      npm install -g yarn
       
      1.3 cnpm(简称淘宝镜像) 安装成功后 我们可以全局使用vue-cli脚手架，可以使用下列任一命令安装这个       新的包
           npm install -g @vue/cli      使用npm命令使用这个
           yarn global add @vue/cli    使用yarn命令使用这个
     验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功
    当然了如果你想快速安装记得在前面加cnpm
   安装完后可以用 vue --version来查看安装的版本
      1.4  然后创建vue的项目 
        (找到vue.js官网->生态系统->vue cli->点击启步->找到安装->找到创建一个项目)
    如果一直创建不成功 可以window+r 输入cmd回车 试下

手动安装(默认webpack)

2准备安装工作

2种方法
一种选择ts
一种不选择ts（基础条件是选择3开发）

1 首先打开你要进行写的项目所在的文件夹 
2 按shifrt +c (在此处打开窗口)   然后进行写命令 
当输入命令报错时 输入个cmd enter一下 试试

我们这里的安装是手动安装  选择手动
1 vue create(项目名称) 创建Vue项目 项目名称不可使用中文
出现二个选项 （1）.（default(babel,eslint)）默认搭建项目配置
（2）.（manally select features）自定义搭建项目配置

1
如果安装选择ts语法来写
后缀名为ts，然后进行开发(生成的代码都是ts来写的)

2 
如果安装不选择ts语法开发，选择了js
必然也可以在.vue页面使用setup来进行开发

使用自定义搭建项目配置(利用上下键切换选项) 选中自定义后点击 按enter确认
最后选择版本我们使用vue3.0版本安装
如果上下建不可以切换选项，我们需要使用winpty vue.cmd create 你要自定义的名称   这个命令
2 然后出现一些配置选项 只选择babel router
按空格选着选中不 按上下键选着 小括号中有星号表示选中
确认选中后点击enter

3 出现是否使用 history模式 use history mode for router
如果项目没有说明使用history模式 则我们不使用history模式 所以选着no 然后点击enter

4 接下来出现的选项选着哪个都可以 直接点击enter也可以

5 接下来一直enter就可以
最后如果出现 cd项目名称 yarn serve/npm run serve都表示项目搭建成功
}

安装成功后的准备工作

内容讲解

//前提条件都要勾选vue3开发的基础下
1
如果安装选择ts语法来写如下所示
后缀名为ts，然后进行开发(使用ts语法)

2 
如果安装不选择ts语法开发，选择了js
必然也可以在.vue页面使用setup来进行开发

src里面的
main.ts入口文件
shims-vue.d.ts这个是定义文件 让ts认识vue的这些东东

创建好进行优化一下

安装完成后并不能直接使用，
我们要删除多余的官方配置来进行使用。

assets文件

把assets里面的logo删除

把assets里面的logo删除

删除app.vue里面的style数据 只保留

  #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     }

<div id="nav">
     <router-link to="/">Home</router-link> |
     <router-link to="/about">About</router-link>
   </div> //把这些删掉

home文件

home文件

<template>
  <div class="home">
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Home',
});
</script>

components文件夹

然后把components里的helloworld.vue删除

router文件夹

然后在路由里面router删除index的一些内容
把这一部分删除就是下面的代码

path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

然后在view文件夹里面删除about.vue文件 整个文档删除

然后一个项目就诞生了

Vite安装

vite官网
https://cn.vitejs.dev/guide/

项目创建