vue脚手架搭建

vue脚手架搭建

一、环境安装

（1）nodejs安装

win+r输入cmd打开控制台窗口，输入：node -v检查是否安装node（安装后会有版本信息）。如果没有安装先去官网安装，安装地址：https://nodejs.org/en/ 。环境配置：

​ 此处的环境配置主要配置的是 npm 安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。
　　例如：我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我的安装目录下创建两个文件夹【node_global】及【node_cache】

（一）设置全局目录和缓存目录，创建完两个空文件夹之后，打开cmd命令窗口，输入

​ npm config set prefix "D:\Program Files\nodejs\node_global"

​ npm config set cache "D:\Program Files\nodejs\node_cache"

（二）设置环境变量，“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

​ 1、将【用户变量】下【Path】的【C:\Users\STAR\AppData\Roaming\npm】修改为【D:\Program Files\nodejs\node_global】

​ 2、在【系统变量】下新建【NODE_PATH】，输入【D:\Program Files\nodejs\node_modules】

（2）npm使用国内淘宝镜像

​ （一）配置

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

​ （二）查看是否成功

npm config get registry

（3）安装webpack

​ webpack是一个模块化打包工具，将不同的资源和文件，进行打包，合并在一个文件里。作用：

​ 1.重新加载编译，将浏览器不认识的语法编译成浏览器认识的语法。less编译成css,ES6语法转换成ES5。

​ 2.减少io请求。发送请求，会发挥一个html到浏览器，这是，打开控制台会发现html页面通过script,link等标签引用的静态，浏览器会再次发出请求去获取这些资源。如何webpack打包，将所有的静态资源都合并好了，减少了io请求。

​ 输入webpack -v，检测是否安装。如果没有输入指令：npm install webpack -g 进行安装。

（4）安装vue

npm install vue

二、脚手架搭建

（1）安装vue-cli

​ 1.输入vue -V检测是否安装，如果没有安装输入命令：npm install -g vue-cli 安装最新版本。

​ 2.如果已经安装了不想要的版本：输入：npm uninstall -g @vue/cli 命令进行卸载。

​ 3.然后输入命令：npm install -g @vue/cli@3.11.0 下载指定的版本。

（2）Vue项目创建

补充：

​ 关于vue-cli2.x和vue-cli3.x创建项目的区别：

​ （1）vue-cli2.x创建项目：

vue init webpack 项目名称

​ （2）vue-cli3.x创建项目：

vue create 项目名称

​ 1.进入创建的目录

cd d:\vue_project\

​ 2.创建项目：

vue init webpack demo

​ 3.启动项目：

npm run dev

​ 4.访问地址：http://localhost:8080/ 进入Welcome to Your Vue.js App页面即成功。

补充（目录说明）：

​ node_modules： 用来存放第三方依赖包

​ public：公告的静态资源

​ src：项目源码目录：

​ assets：用来存放静态资源文件

​ components：自定义组件

​ App.vue：项目根组件

​ main.js：项目打包入口文件

​ package.json：项目的包管理配置文件

注：可以自创一个views（名字自己定）放在src目录下进行代码编写