1、Vue 环境搭建

NPM 环境安装-Node.js安装

#检查node是否安装成功
node -v
npm -v

配置npm的全局模块的存放路径以及缓存的路径

默认会将模块安装到C:\Users\用户名\AppData\Roaming\npm路径中。所以可以修改路径
在node.js的安装目录下新建两个文件夹node-cache和node_global

CMD 中执行以下配置：

npm config set prefix "C:\software\Nodejs\node_global"
npm config set cache "C:\software\Nodejs\node_cache"

之后用npm install XXX -g安装以后模块就在这两个文件夹里。

安装CNPM，国内淘宝下载比较快，只后可以用CNPM代替NPM命令了

npm install -g cnpm --registry=http://registry.npm.taobao.org

如需安装yarn，npm和yarn功能一样，可不安装

npm i -g yarn

任意目录下都可以使用cnpm、vue等命令，环境变量配置

#环境变量path 添加 node全局目录
C:\software\Nodejs\node_global

#设置node目录
NODE_PATH=C:\software\Nodejs\node_modules
#node 目录添加path中
Path=;%NODE_PATH%;

Vue及Vue-cli 脚手架安装

#Vue安装
npm install -g @vue

#vue-cli安装
yarn global add @vue/cli
#or 
npm install -g @vue/cli
#or
cnpm install -g @vue/cli


#检查vue 是否安装成功
vue -V

安装webpack 模板

cnpm install -g webpack

#查看vue还有哪些模板
vue list

通过vue-cli创建项目

#vue-cli3.x 方式创建
vue create myVueDemo
#or  vue-cli2.x  方式创建
vue init webpack myVueDemo

通过Vite 脚手架快速创建项目

使用npm创建

npm init vite-app <project-name>
cd <project-name>

#初始化组件，启动项目
npm install
npm run dev

使用yarn创建

yarn create vite-app <project-name>
cd <project-name>

#初始化组件，启动项目
yarn
yarn dev