关于vue-cli2.0的安装使用,在此简单记录存档一下

一、生成项目

1、先全局安装vue-cli 2.0

npm install -g vue-cli
2、查看vue版本号
vue -V    //注:V是大写字母V
3、创建一个项目

cd指令进入到保存项目的文件夹下,然后输入命令
vue init webpack 
或者直接vue init webpack my-project 创建,my-project 是项目目录。

4、安装项目所需要的依赖 


cd 到my-project ,执行:


npm install
5、 然后使用npm run dev运行我们的项目

6、http://localhost:8080/  打开就可以看到我们的运行的结果了

7、常用几个命令    


7.1、打包 vue-cli 生成 生产环境部署资源 的 npm命令

 npm run build
 7.2、用于查看 vue-cli 生产环境部署资源文件大小的 npm命令
npm run build --report
7.3、插件安装
npm install vue-router --save
npm install less-loader --save-dev
二、vue-cli2.0文件夹和文件简单说明

build:webpack相关配置,存放webpack开发环境和生产环境的相关配置。
config:存放配置文件,打包输出的相关配置和用于区分开发环境和线上环境。
dist:npm run build打包后生成的静态资源文件,用于生产环境部署的代码。
node_modules:存放npm命令下载的开发环境和生产环境的依赖包。

src: 存放项目源码及需要资源的文件夹。

assets:存放项目中需要用到的css、images等静态资源。
componets:存放vue开发中的一些公共组件,比如header.vue等。
router:配置vue页面路由的文件夹。
service:存放请求服务的接口。
views:存放vue页面的文件夹。
util:存放一些公共的js方法。
store:vuex状态集中管理文件夹
app.vue:使用标签<route-view></router-view>渲染整个工程的.vue组件。
main.js:vue-cli工程入口文件,加载各种公共组件。

package.json:项目信息、项目所需模块的信息和npm命令管理。
index.html:页面入口,可以设置页面的一些meta头信息和提供<div id=”app”></div>用于挂载 vue 节点。

更多详细可以查看:

vue-cli 目录结构详细讲解总结