Vue安装过程及环境配置

Vue安装过程及环境配置

---

本节内容服务于SpringBoot + Vue 搭建 JavaWeb 增删改查项目。

---

通过WIN+R输入CMD打开命令行（必须是以管理员身份运行），输入：

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

这句命令可以更改默认设置，默认为从国外服务器下，这里使用阿里巴巴在国内的镜像服务器，下载速度快。

---

安装脚手架vue-cli，在命令行CMD输入如下命令：

npm install --global vue-cli

---

安装后，输入如下命令：

vue -V

或

vue --version

检查是否安装成功。

---

查看安装的vue信息：

npm info vue

查看安装的vue版本：

npm list vue

---

在命令行输入：

npm install -g vue-router

安装vue-router。

---

在命令行中运行命令 ：

npm install webpack -g

然后等待安装完成。

---

webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，需要输入以下命令安装webpack-cli：

npm install --global webpack-cli

安装成功后可使用

webpack -v

查看版本号；

---

创建项目（最好在cd到D盘的某个位置，即项目的路径，否则项目会新建在C:\Users\Administrator\，也可以直接在想要的项目路径下输入cmd）：

使用vue建一个项目名叫“my-project”，注意项目名不能有大写。

vue init webpack cjw-project

注：vue-cli 的模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目，配置并不全放在根目录下的webpack.config.js 中。
webpack-simple 相对简单的，根目录下才有webpack.config.js。

输入命令后需要进行一些相应的配置：

Project name（工程名）:使用小写命名后回车
Project description（工程介绍）：设置或回车
Author：作者名 ：设置或回车
Vue build ==> （是否安装编译器）runtime-compiler、 runtime-only 都是打包方式，第二个效率更高；
Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到路由，所以Y 回车；
Use ESLint to lint your code ==> 是否需要ESLint检测代码，目前我们不需要所以 n 回车；
Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
Setup e2e tests with Nightwatch ==>是否需要端到端测试工具目前我们不需要所以n回车；
Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)==> 安装依赖npm install
回车；

---

最终vue项目初始化成功!

项目目录结构（到自己设置的路径去找没设置则在默认路径）：

项目目录中的node_modules文件夹是 vue-cli 创建的一个基于 webpack 的 vue.js 项目。

---

按提示代码进入到项目目录下使用

npm run dev

之后打开本地浏览器输入：

http://localhost:8080

实时查看效果；

若浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config>index.js

---

END