vue脚手架v-cli，第一个vue程序

1. v-cli安装

• 在玩v-cli vue客户端脚手架时，需要安装好node.js，是前端管理js包的工具
• 正式安装vue-cli脚手架

1. npm install vue-cli -g
2. vue list 

如果vue list出不来，注销一下电脑

2. 使用webpack构建vue程序

1、选择一个目录，在此目录下打开cmd窗口，所有步骤如下

vue init webpack myvue # 等待nodejs构建
cd myvue  # 进入myvue目录下
npm install 
npm run dev 

构建项目时，会填写一些项目的信息，我全选的no，你可以选yes，插件会自动加入到项目

npm install后，可能会出错，按照提示修复就行

运行当前项目，访问下面的端口

访问项目

3. 目录介绍

• 我这用的是idea打开的文件夹
  

4. webpack将vue打包成js文件

• webpack安装 将es6语法打包编译成es5的语法，用于运行

npm install webpack -g  # 打包工具
npm install webpack-cli -g # 客户端工具

前端分模块开发,各个包可以相互引入.通过webpack编译生成一个js文件

hello.js

// es6 语法 exports暴露一个方法
exports.sayHi = function() {
    
    
    document.write('<h3>bitqian666</h3>')
}

main.js

// 导入js文件
let hello = require('./hello')
hello.sayHi()

打包配置

module.exports = {
    
    
    entry: './modules/main.js',
    output: {
    
    
        filename: './bundle.js'
    }
}

控制台运行 webpack

生成bundle.js,直接用