美文网首页
vue2 — 使用vue-cli创建vue2项目

vue2 — 使用vue-cli创建vue2项目

作者: 守心向暖 | 来源:发表于2017-05-16 15:57 被阅读0次
  • npm安装vue-cli
npm install -g vue-cli
  • 创建vue2项目
vue init <template-name> <project-name>
// template-name可选项:webpack、webpack-simple、browserify、browserify-simple、simple
// project-name: 创建项目的名称,缺省默认在当前目录初始化项目信息

vue-cli使用详情:https://github.com/vuejs/vue-cli

  • 基于webpack创建的项目结构


    vue-cli初始化创建的项目结构
build: webpack打包相关配置信息
config: 环境配置信息
package.json: 依赖项配置文件
index.html: 首页
src: 项目源码存放
static: 静态资源文件存放目录
src/main.js: 入口文件
src/App.vue: App根节点
  • 安装及运行
// 切入到项目目录
cd project-name  
// 安装依赖
npm install 
// 编译
npm run build
// 启动dev
npm run dev
或npm run start

启动后会自动在浏览器打开:http://localhost:8080/#/,显示以下画面:

启动效果

下一篇: vue2 — 根据需要做点改动

相关文章

网友评论

      本文标题:vue2 — 使用vue-cli创建vue2项目

      本文链接:https://www.haomeiwen.com/subject/tcslxxtx.html