Vue脚手架环境搭建
一、什么是vue-cli1、概念2、主要功能3、环境准备4、node.js官网
二、主要的命令（管理员运行命令，不然命令不能成功）1、查看电脑安装Node.js是否成功1.1 查看node.js的版本号1.2 查看npm的版本号
2、设置淘宝镜像源(解决npm速度慢的问题)3、安装vue的脚手架（为项目开发做准备，搭建基础）4、Webpack安装及使用（全局安装webpack以及webpack-cli）5、正式开始搭建项目5.1 切换到目标文件夹（自己项目想放的地方）5.2 初始化项目（项目名：vue-element）5.3 切换到项目文件夹5.4 下载vue-router（如果node14版本的下载vue-router4.xx版本的，运行会出现问题）5.5 下载element-ui5.6 下载sass（1）首先修改sass安装的源，使用淘宝的npm（否则直接下载会失败）（2）再下载node14所对应的指定版本的sass-loader和node-sass
5.7 安装模块到项目node_modules目录下。不会将模块依赖写入devDependencies或dependencies 节点。运行 npm install 初始化项目时不会下载模块。5.8 安装axios5.9 安装vuex（状态管理模式）5.10 运行该环境（来检验脚手架是否搭建成功）
一、什么是vue-cli
1、概念
vue-cli官方提供的一个脚手架（预先定义好的目录结构及基础代码），用于快速生成一个vue的项目模板。
2、主要功能
统一的目录结构 本地调试 热部署 单元测试 集成打包上线
3、环境准备
Node.js(版本号：14.16.0) git
4、node.js官网
node.js官网：node.js官网 （本文默认node.js安装成功且配置成功）
二、主要的命令（管理员运行命令，不然命令不能成功）
1、查看电脑安装Node.js是否成功
1.1 查看node.js的版本号
node -v
1.2 查看npm的版本号
npm -v
2、设置淘宝镜像源(解决npm速度慢的问题)
npm install --registry=https://registry.npm.taobao.org
3、安装vue的脚手架（为项目开发做准备，搭建基础）
执行该项命令时，建议先上网搜索相关博主的建议或选项方案，然后自己判断自己所需要的，再选择相关选项。
npm install vue-cli -g
4、Webpack安装及使用（全局安装webpack以及webpack-cli）
这是我自己指定的版本，如果不是Node14版本的话，如果报错，建议上网找到指定版本的webpack或webpack-cli，然后下载就能成功了
npm install webpack@5.74.0 webpack-cli@4.10.0 -g
5、正式开始搭建项目
5.1 切换到目标文件夹（自己项目想放的地方）
cd D:\workspace\项目文件夹
5.2 初始化项目（项目名：vue-element）
vue init webpack vue-element
5.3 切换到项目文件夹
cd vue-element
5.4 下载vue-router（如果node14版本的下载vue-router4.xx版本的，运行会出现问题）
npm install vue-router@3.5.2 --save-dev
5.5 下载element-ui
npm i element-ui -S
5.6 下载sass
（1）首先修改sass安装的源，使用淘宝的npm（否则直接下载会失败）
npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
（2）再下载node14所对应的指定版本的sass-loader和node-sass
npm install sass-loader@7.3.1 node-sass@4.14.1 --save-dev
5.7 安装模块到项目node_modules目录下。不会将模块依赖写入devDependencies或dependencies 节点。运行 npm install 初始化项目时不会下载模块。
npm install
5.8 安装axios
npm install axios -s
5.9 安装vuex（状态管理模式）
npm install vuex --save
5.10 运行该环境（来检验脚手架是否搭建成功）
npm run dev
这样一个完整的vue项目所需的依赖全部导入成功了
文章链接
您阅读本篇文章共花了：
发表评论