Vue2.0+Vue-cli脚手架

一、安装node.js判断版本号

---

二、安装vue-cli

1.推荐使用国内镜像来安装，所以我们先设置cnpm

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

2.如果安装失败，可以使用 npm cache clean 清理缓存，然后再重新安装。后面的安装过程中如果安装失败，也需要先清理缓存

3.同样可以使用 cnpm -v 查看是否安装成功

4.然后使用 cnpm 安装 vue-cli 和 webpack

cnpm install -g vue-cli

最新的vue项目模板中，都带有webpack插件，所以这里不用安装webpack

5.安装完成后，可以使用 Vue - V (注意v大写)查看是否安装成功。

如果提示‘无法识别“vue”’，有可能是npm 版本过低，可以使用npm install -g npm 来更新版本

---

三、生成项目

6.首先需要在命令行中进入到项目目录，然后输入：

vue init webpack Vue-Project

其中 webpack 是模板名称，可以到 vue.js 的 GitHub 上查看更多的模板https://github.com/vuejs-templates
Vue-Project 是自定义的项目名称，命令执行之后，会在当前目录生成一个以该名称命名的项目文件夹

配置完成后，可以看到目录下多出了一个项目文件夹，里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目

7.然后进入项目目录（cd Vue-Project），使用 cnpm 安装依赖

cnpm install

8.然后启动项目

npm run dev

如果浏览器打开之后，没有加载出页面，有可能是本地8080端口被占用，需要修改一下配置文件 config > index.js

建议将端口号改为不常用的端口。另外我还将build的路径前缀修改为‘ . / ’（原来的为‘ / ’），是因为打包之后，外部引入js和css文件时，如果路径以‘ / ’开头，在本地是无法找到对应的文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件就得修改文件路径。

---

四、打包上线

自己的项目需要放在 src 文件夹下
项目完成之后，可以输入 npm run build 来进行

npm run build

打包完成后，会生成dist文件夹，如果已经修改了文件路径，可以直接打开本地文件，项目上线时，只需要将 dist文件夹 放到服务器就行了。

build —— 里面是一些操作文件，使用 npm run * 时，其实执行的就是这里的文件。

config —— 配置文件，执行文件需要的配置信息

src —— 资源文件，所有组件以及所用的图片都是在这个放着的，简单的看一下这个文件夹里都放了哪些东西

• assets ——>> 资源文件夹，放图片之类的资源

• components ——>> 组件文件夹，写的所有组件都放在这里

• router ——>> 路由文件夹，这个决定了页面的跳转规则

• App.vue ——>> 应用组件，所有自己写的组件，都是在这个组件之上运行的

• mian.js ——>> webpack的入口文件

• webpack四大特性：
  
  • entry入口
  • output输出
  • loader加载器
  • plugins插件，可以在项目中build\webpack.base.conf.js第12行看到这个入口文件是那个。