VUE配置教程

一. 安装node.js

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

VUE配置教程_第1张图片

2. 安装步骤:一直next

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

VUE配置教程_第2张图片

 

二. 更换npm源(换成国内源),在cmd输入

1. 查看本地源:npm config list

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

 

三. 建立项目:

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

2. 运行: vue init webpack test_vue

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

VUE配置教程_第3张图片

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

VUE配置教程_第4张图片

2. 打包:npm run build:prod    (内容保存在./dist/中)

VUE配置教程_第5张图片

你可能感兴趣的:(vue,vue入门)