vue.js学习教程（1）--安装及初次运行

一 先来确定我们的工程目录 F:/testneo

二 安装node

1 node安装地址https://nodejs.org/en/download，直接进行安装，配置全局变量。

2 cmd里验证 node -v，查看版本号，安装成功：

3 更换镜像：（配置成国内镜像，目的：更快安装vue）

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

4 安装cnpm：（保证依赖可以安装）

npm install -g cnpm --registry=http://registry.npm.taobao.org 

5 安装vue，直接在cmd客户端输入以下命令

cnpm install vue -g

6 安装vue-cli（vue命令行工具） 

cnpm install vue-cli -g

 7 进入项目目录（F:/testneo），创建vue项目

vue init webpack mytest

 然后目录生成如下：

           

简单介绍：

build：最终发布代码的存放位置。

config：配置目录，包括端口号等。

node_modules：cnpm install后产生，包含Node.js和npm依赖的文件以及后续安装的第三方组件或者第三方功能。

src：开发代码目录

assets：放置图片

components：组件开发

App.vue:主文件，项目入口，类似python里的main.py。

main.js：项目的核心文件

router：项目路由

static：静态资源，如图片，字体等

.babelrc:设置转码规则和插件

8 运行项目：

 进入vue init生成的工程，npm run dev

结果如下：

9：访问http://localhost:8080，看见如下页面，表示成功

总结：vue的安装和启动方式偏多，对于初学者我们无需关注太多，先找到一种方式把项目跑起来为先，再后续多次实战之后，才能领会它的架构体系及了解为何如此使用的本质问题去。

有兴趣一起学习的朋友可以加群：1077796631