vue笔记4—— 使用vue-cli搭建项目

node.js的安装参照http://www.javashuo.com/article/p-mpdcimfc-hw.html

一、安装完node.js以后全局安装vue-cli

npm install -g vue-cli

二、安装完vue-cli脚手架以后就能够建立本身的项目了

vue init webpack my-project

命令输入完成后敲回车，此时会自动下载模板，会让你按提示完成项目的建立，以下图

（1）Project name:——项目名称

（2）Project description:——项目描述

（3）Author:——做者

（4）Vue build:——构建模式，通常默认选择第一种

（5）Install vue-router?:——是否安装引入vue-router，这里选是，vue-router是路由组件,后面构建项目会用到

（6）Use ESLint to lint your code?:——这里强烈建议选no 不然你会很是痛苦，eslint的格式验证很是严格，多一个空格少一个空格都会报错，因此对于新手来讲，通常不建议开启，会加大开发难度

（7）Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch这两个是测试，能够不用安装

三、安装依赖

项目建立完成以后能够看到目录结构以下

（1）build和config都是webpack的配置

（2）src是存放源文件的目录

  src文件夹里面

这个文件夹是整个项目最主要以及使用频率最高的文件夹。

“assets”: 共用的样式、图片

“components”: 业务代码存放的地方，里面分红一个个组件存放，一个页面是一个组件，一个页面里面还会包着不少组件

“router”: 设置路由

“App.vue”: vue文件入口界面

“main.js：对应App.vue 建立vue实例，也是入口文件，对应webpack.base.config.js里的入口配置

（3）存放的文件不会通过webpack处理，能够直接引用，例如swf文件若是要引用能够在webpack配置对swf后缀名的文件处理的loader，也能够直接将swf文件放在这个文件夹引用

（4）babelrc是babel的配置项

（5）editorconfig是编辑器的配置项

（6）index.html是入口页面

（7）package.json是项目的描述和依赖，咱们在开始的时候执行npm run dev，就至关于执行了这个文件里面的scripts的dev对应的 node build/dev-server.js。

接下来使用命令行工具

cd my-project

npm install

能够在项目目录里直接安装，是由于有package.json这个文件，里面包含了须要安装的包的名称。安装完成后，能够在目录中发现多出了node_modules这个文件夹，里面为下载的依赖。

四、运行项目

到项目所在目录下，输入npm run dev，回车，启动项目

到此项目已经搭建完成

浏览器中输入网址http://localhost:8080，就能够看到以下画面，接下来就能够开始开发啦！