Vue环境搭建

Vue环境搭建

Npm是node.js的包管理器，用于node插件管理类似于maven
npm由三个独立的部分组成：

• 网站
• 注册表(registry)
• 命令行工具(CLI）

网站是开发者查找包(package）、设置参数以及管理npm使用体验的主要途径。
注册表是一个巨大的数据库，保存了每个包的信息。
CLI通过命令行或终端运行。开发者通过CLI与npm打交道。

Vue脚手架是用来干嘛的？
用于快速生成一个项目，一般不要你手动配置各种东西，直接开发

1.安装node.js
官网下载地址：https://nodejs.org/zh-cn/download/

2.安装一路下一步就好了

查看是否安装成功：
Doc命令
node -v 查看node版本
npm -v 查看npm版本

3.用淘宝的cnpm镜像来安装vue.

npm install -g cnpm --registry=http://registry.npm.taobao.org
npm ls cnpm -g 查看是否安装完成

4.安装全局脚手架
输入命令：cnpm install --global vue-cli
验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；

5.创建项目模块
在这里我是创建在E盘 输入E:进入到E盘(下载的东西比较大建议不要下载到c盘) 然后通过vue init webpack my-project-first(项目名) 输入之后就一直回车，直到出现是否要安装vue-route(路由)，这个我们在项目要用到，所以就输入y 回车

下面会出现是否需要js语法检测，这个我们暂时用不到，就可以直接输入no，后面的都可以直接输入no，都是我们暂时用不到的

创建完成之后提示：

打开E盘 会发现创建好的文件夹

6.进入文件夹
cd my-project-first 回车进入新建的项目。

7.在项目里安装依赖
因为各个模板之间都是相互依赖的，所以现在我们要安装依赖，在项目里输入以下命令

cnpm install

8.测试项目运行情况
cnpm run dev直接回车

9.在浏览器中输入localhost:8081
默认端口为8080

出现上图安装成功
10.修改端口号
根目录下有一个config文件夹，看名字就知道与配置有关，打开config目录下的index.js，这里不仅可以改变端口，还可以根据需要改变其他配置信息。

和tomcat冲突 改成8081

注：Vue脚手架就是一个工具，是用来帮助我们快速搭建Vue项目的工具
启动项目的话在项目目录中doc命令输入cnpm run dev

卸载npm
npm uninstall cnpm -g
卸载脚手架
npm uninstall vue-cli -g

项目结构：

build 编译用的配置文件，配置参数,打包的代码存放在这里。
Build.js 生产环境构建脚本
webpack.base.conf.js 基础配置
webpack.dev.conf.js 开发环境配置
webpack.prod.conf.js 生产环境配置
config vue项目的基本配置文件
dev.env.js 开发环境变量
index.js 项目配置文件
prod.env.js 生产环境变量
test.env.js测试环境变量
node_modules 项目中npm安装的依赖模块
src 源代码文件夹
assets 资源文件夹，里面放一些静态资源
components 放置各个vue组件文件
router vue-router 路由配置文件
App.vue App.vue组件，项目入口文件
main.js 项目的核心入口文件
data 资源文件，如引用的json文件
http http请求配置文件
style 项目主题以及less配置文件
unit 项目公用的js文件
state.js 项目的状态管理文件，包括登录，用户信息和token等
static 静态资源目录，如图片、字体等
rsa 登录加密配置文件
test 测试文件，初始化测试都写在这里,可以删除
babelrc babel编译参数，vue开发需要babel编译
editorconfig 代码编辑环境配置文件(编辑器的配置，编码，代码风格)
eslintignore eslint检查忽略文件(过滤无需上传到svn上的文件类型)
eslintrc.js eslint检查配置文件
gitignore git提忽略文件
.postcssrc.js css配置文件,自动补齐浏览器css前缀
index.html 主页，项目入口文件
package.json 项目配置文件，，描述项目信息和依赖
README.md 项目的说明文档，markdown 格式
server node后端文件，可以忽视或删除

VUE debugger调试
在Chrome或Firefox浏览器的扩展插件仓库里搜vue devtool，安装Vue.js devtools 使用的时候，在上边工具栏找到vue，选中

加入debugger调试 如果只是打印console也可以