VUE配置教程

一. 安装node.js

1. 下载安装包：下载地址：https://nodejs.org/en/download/；windows上选择.msi格式

2. 安装步骤：一直next

3. 验证安装：Win+R打开cmd窗口。输入node -v，显示版本号。

 

二. 更换npm源（换成国内源），在cmd输入

1. 查看本地源：npm config list

2. 更换成国内源：npm –registry https://registry.npm.taobao.org info underscore

 

三. 建立项目：

1. 在一个空文件夹下打开cmd

2. 运行： vue init webpack test_vue

创建成功后，显示如下，且文件夹下出现工程

3. 源代码结构介绍：

build	最终发布的代码的存放位置。
config	配置路径、端口号等一些信息，我们刚开始学习的时候选择默认配置。
node_modules	npm 加载的项目依赖模块。（整个项目需要的依赖资源）
src	这里是我们开发的主要目录，基本上要做的事情都在这个目录里面，里面包含了几个目录及文件。
assets	放置一些图片，如logo等。
components	目录里放的是一个组件文件，可以不用。
App.vue	项目入口文件，我们也可以将组件写这里，而不使用components目录。
main.js	项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除。
.XXXX文件	配置文件。
index.html	首页入口文件，可以添加一些meta信息或者同统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文件。

 

四. 安装vue环境

1. 安装webpack ：npm install webpack -g    (cmd中输入)

2. 安装vue-cli （vue的命令行工具）：npm install vue-cli -g    (cmd中输入)

3. 安装vue需要的环境：（安装项目下，packages.json的依赖库）

    （1） 进入vue源码所在文件夹，打开cmd

    （2） 执行：npm install

 

五. 调试和打包vue

1. 调试：npm run dev

2. 打包：npm run build:prod    （内容保存在./dist/中）