关于vue-cli2.0的安装使用,在此简单记录存档一下
一、生成项目
1、先全局安装vue-cli 2.0
npm install -g vue-cli2、查看vue版本号
vue -V //注:V是大写字母V3、创建一个项目
cd指令进入到保存项目的文件夹下,然后输入命令
vue init webpack或者直接vue init webpack my-project 创建,my-project 是项目目录。
4、安装项目所需要的依赖
cd 到my-project ,执行:
npm install5、 然后使用npm run dev运行我们的项目
6、http://localhost:8080/ 打开就可以看到我们的运行的结果了
7、常用几个命令
7.1、打包 vue-cli 生成 生产环境部署资源 的 npm命令
npm run build7.2、用于查看 vue-cli 生产环境部署资源文件大小的 npm命令
npm run build --report7.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 节点。