vue之搭建脚手架快速创建vue项目

准备工作

安装nodeJS环境

Vue的脚手架是依赖于node.js的，所以无论是安装新版本还是旧版本，我们都要安装node.js。

我们可以直接到node.js官网下载，然后像安装普通软件一样安装node.js。

npm(node package manager)是node的包管理工具，我们在后面主要是使用npm来搭建脚手架和安装一些常用的组件。

node.js成功安装之后，npm一并安装成功，这个时候我们可以打开cmd窗口，输入 node -v 和 npm -v 来查看node.js和npm的版本，如果能够显示出版本，说明已经安装成功。

注意： node版本 14.18 以上（vite支持最低的node是14.18版本） 装在全英文的路径 ，保证电脑的node环境单纯（只有一个版本的node），最高使用node版本16，一般使用偶数的版本。

安装淘宝镜像

为什么要安装淘宝镜像呢？因为我们使用npm来搭建脚手架的时候，是从国外的npm服务器上下载需要的文件，这就导致下载过程会很漫长。我们安装了淘宝镜像之后，就可以从国内的镜像服务器下载搭建脚手架所需的文件，可以很快的完成下载任务。

我们在cmd窗口中输入以下命令：npx nrm use taobao 来安装淘宝镜像，一台电脑上执行一次即可 。安装完成之后，我们可以使用命令npx -v来查看其版本，如果能够显示版本说明安装成功。

npx就是 npm下的一个命令执行工具 ,完成之后，我们就可以用npx命令代替npm命令来安装依赖包了。

创建Vue项目

1. npx create-vue vue-test 创建名为vue-test的项目
2.  cd vue-test  进入vue-test项目目录
3.  npm i 安装依赖包
4.  npm run dev 打开项目
5.  打包  npm  run build-->开发---》生产（项目完成之后，最后打包）

到这里，我们就已经成功使用vue脚手架快速搭建了我们的Vue项目，最后再来看一眼我们的项目文件夹，里面与很多文件，这就是vue脚手架自动帮我们下载的项目文件了。在这些文件的基础之上，我们就可以快速上手进行开发了。

接下来我们对项目的文件进行简单分析：

 vite 开发服务器、打包

• vite.config.js就是vite的配置文件
• package.json package包，记录了此次项目的使用的第三方依赖包以及配置一些项目中使用的命令
• package-lock.json 协助package.json来记录依赖关系
• index.html 项目的入口html文件
• .gitignore 和git相关 git版本控制工具

• public 存放一些静态资源 （静态资源不参与打包）

• node_modules "宇宙中最重的东西"，项目使用第三方依赖 npm i 第三方依赖就下载到node_modules文件夹下，体积大、里面都是一些小文

• src 存放开发代码的文件夹

•   main.js 项目的js的入口文件

  components文件夹下 放一些 通用组件

  views放一些页面组件

  assets文件夹下的内容 也是静态资源 但是 assets文件夹下的内容 会参与打包

到这来就可以对vue项目进行相关编辑操作了。

补充：

单文件

单文件指的是.vue后缀的文件，所谓的单文件组件主要为了方便开发

一个组件对象 写成独立的文件的形式 文件的后缀.vue

必须要通过vite进行打包 转换成浏览器能够识别的html js css

css文件的引入

一般情况下，css样式是写在对应的.vue文件里面的，并且style用scoped修饰，表示该样式只在当前页面起作用，不被子页面继承。

但是有些时候，我们还需要引入一个固定的css文件是怎样引入呢？

有以下三种方法:

 1.放在asset文件夹下，在main.js中引入import './assets/css/style.css'
 2.放在public文件夹下，在index.html中引入
    public不参与打包，直接写在public下的路径即可，不用写public

3.在vue页面文件中的script标签中通过import方式引入import  "@/assets/css/style.css";