vue 脚手架创建

脚手架创建

介绍

脚手架是什么呢，就是vue自动创建脚手架的项目模板，用于搭建项目的整体骨架，就比如后端开发时，咱们可以创建一个空项目，一步步创建为mvc项目，但是vs封装了mvc的框架，我们可以直接生成整体框架，其中包括基础包和一些重要文件，脚手架的创建也是同样的效果

nodejs

安装

安装脚手架之前需要安装nodejs，首先进入官网安装nodejs

Node.js — Run JavaScript Everywhere (nodejs.org)

默认安装即可，安装后WIN+R输出cmd

输出node -v查看node版本，输入npm -v查看版本

修改全局路径和缓存

其中这一步是为了修改后续安装内容的地址，可以省略

安装成功后，会在你选择的地址中生成一个全局模块node_cache和模块node_gloabal两个文件夹

默认地址C:\Users\用户名\AppData\Roaming\npm

win+R打开运行窗口，输入cmd

首先创建两个文件夹来替换路径

npm config set prefix "D:\node\node_global"

npm config set cache "D:\node\node_cache"

系统变量

在win中输入环境变量点击打开，找到系统变量面板，点击新建

在系统变量中，新建，变量名：NODE_PATH 变量值：node_global文件夹下的node_modules文件夹。如：E:\develop\nodejs\node_global\node_modules

修改用户变量中的Path变量，将默认的npm路径修改为新建的node_global路径

配置淘宝镜像

之所以要配置淘宝镜像是因为安装node和npm时会默认从https://nodejs.org/dist/和https://github.com/npm/cli/archive/地址下载，很大可能下载出错，所以使用国内淘宝镜像

npm config set registry https://registry.npm.taobao.org

nvm

nvm全英文也叫node.js version management，是一个nodejs的版本管理工具，为了解决node.js各种版本存在不兼容现象可以通过它可以安装和切换不同版本的node.js

点击链接进入nvm下载网页，选择nvm-setup.zip版本下载

常用命令

nvm list [available] //展示本地安装的所有版本，*号表示当前正在用
nvm install [版本号]  //安装指定版本node 例如： nvm install 12.18.0
nvm use 12.18.0  //使用特定版本
nvm uninstall 12.18.0  //卸载指定版本

如果下载出错，可以修改淘宝镜像

输入命令

nvm node_mirror https://npm.taobao.org/mirrors/node/

nvm npm_mirror https://npm.taobao.org/mirrors/npm/

脚手架创建

脚手架创建的三种方式

使用 vue-cli 创建

官方文档：介绍 | Vue CLI

vue-cli4.x是基于webpack4的，vue-cli5.x是基于webpack5的

## 安装或者升级你的@vue/cli

npm install -g @vue/cli

## 创建
vue create vue3_cli

更具需求选择模板，使用这个命令需要安装webpack

npm install webpack -g

查看版本

npm webpack -v

使用crate-vite 创建

官方文档：开始 | Vite 官方中文文档

crate-vite是vite官方提供的官方脚手架，可以创建vue、react等框架的项目模板

npm create vite@latest

npm create 是 npm init 的别名 npm init vite@latest同样生效

根据需求选择模板，不清楚的可以选择开启Typescript和rout其他否

使用 create-vue创建

官方文档：快速上手 | Vue.js (vuejs.org)

这是vue官方提供的vue项目构建工具，基于vite

npm init vue@latest

安装完毕后，可以使用vscode终端中输入npm run dev 运行

介绍下按照的结构

node_modules存放npm依赖

tsconfig.json为配置文件

主要看src中

assets 存放的是一些静态资源，例如一些静态图片等，也可以放公共的css和js文件；

components 存放的是一些全局组件或多个页面公用的子组件，比如: 页头组件、页脚组件、广告轮播组件等；

router 存放的是路由配置，保存着所有路径和组件的对应关系；

views 存放所有的页面组件，有几个页面，就在views下创建几个组件文件，比如: 首页、详情页、商品列表页、登录页等；

App.vue 是整个网站所有页面公共的容器组件；

main.ts 脚手架核心js，导入整个项目中用到的js，实例化vue的对象，通过实例化的vue渲染整个程序，承担了配置Vue项目的责任。

ts是js的迭代语法，作用一致