vue-cli新建项目

1、查看自己的node.js和npm版本

使用淘宝NPM镜像

大家都知道国内直接使用npm 的官方镜像是非常慢的，这里推荐使用淘宝 npm 镜像。

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

这样就可以使用cnpm 命令来安装模块了；

2、项目初始化

1.第一步：安装vue-cli脚手架

cnpm install vue-cli -g      //全局安装 vue-cli

2、新建vue项目

     在命令行中，进入指定路径，运行 vue init webpack 项目名称，例如： vue init webpack myvue。

按照提示信息，进行创建项目，一直回车键或者选择yes

   等待创建完成，过程需要几分钟。

3、vue目录结构

    利用vue-cil初始化构建vue项目完成后，打开项目目录，会看到vue的一个初始化结构，如下图：

 其中：

build——项目构建(webpack)相关代码。

config——基本配置信息，如端口等，此处初学我们可以默认。

node_modules——npm加载的项目依赖模块。

src——最重要的开发目录

，包含：assets（放置一些图片，如logo等）、 components（ 组件文件夹）、App.vue（ 项目入口文件）、main.js:（项目的核心文件）

static——静态资源目录。在打包发布后将用于存放静态资源。

test——初始测试目录，可以删除。

index.html ——首页入口文件。

package.json ——项目配置文件，此处初学我们可以默认。

.xxxx文件 ——一些配置文件，包括语法配置，git配置等，此处初学我们可以默认。

README.md ——项目的说明文档，为markdown 格式 。

3、启动运行

1、进入项目根目录，运行命令 npm run dev，如下：

 

 2.在浏览器输入以上地址