vue-cli的使用

一、自配的vue项目骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack</title>
</head>
<body>
    <div id="app"></div>
    <script src="node_modules/vue/dist/vue.min.js"></script>
</body>
</html>

index.html

import Vue from 'vue'
import App from './App.vue'
new Vue({
    el:'#app',
    template:'<App />',
    components:{App}
})

main.js

<template>
    <div id="app">
        <h1>root component</h1>
        <h2>{{message}}</h2>
        <Foo></Foo>
    </div>
</template>
<script>
import Foo from './components/Foo.vue'
export default {
    data(){
        return{
            message:'hello world'
        }
    },
    components:{
        Foo,
    },
}
</script>
<style scoped>
h1{
    color: red
}
</style>

App.vue

<template>
    <div>
        <h1>Foo Component</h1>
    </div>
</template>

Foo.vue

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "build": "webpack",
    "watch-build": "webpack --watch",
    "dev": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^1.0.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.21.0",
    "vue-loader": "^15.2.6",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.16.3",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  },
  "dependencies": {
    "babel-runtime": "^6.26.0",
    "vue": "^2.5.17"
  }
}

package.json

// 该文件其实最终是要在node环境下执行的
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoadPlugin = require('vue-loader/lib/plugin')
const webpack = require('webpack')

// 导出一个具有特殊属性配置的对象
module.exports = {
    entry:['babel-polyfill','./src/main.js'],/* 入口文件模块路径 */
    output:{
        path:path.join(__dirname,'./dist/'),/* 出口文件模块所属目录，必须是一个绝对路径 */
        filename:'bundle.js'/* 打包的结果文件名称 */
    },
    devServer:{
        // 配置webpack-dev-server的www目录,配置虚拟内存
        contentBase:'./',
        hot:true
    },
    mode:'development',
    plugins:[
        // 该插件可以把index.html打包到bundle.js文件所属目录，跟着bundle走
        // 同时也会自动在index.html中注入script引用链接，并且引用的资源名称，也取决于打包的文件名称
        new htmlWebpackPlugin({
            template:'./index.html'
        }),
        new VueLoadPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    externals:{
        // 加载第三方资源
        vue:'Vue'
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use:[
                    //注意：这里的顺序很重要，不要乱了顺序
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/.(jpg|png|gif|svg)$/,
                use:[
                    'file-loader'
                ]
            },
            {
                test:/.js$/,
                exclude:/(node_modules|bower_components)/,//排除掉node_module目录
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['env'], //转码规则
                        plugins:['transform-runtime']
                    }
                }
            },
            {
                test:/.vue$/,
                use:[
                    'vue-loader'
                ]
            }
        ]
    }
}

webpack.config.js

二、vue-cli

①一个脚手架工具,可以快速生成基本的项目骨架,自带了webpack配置，官方文档：https://cli.vuejs.org/zh/

②安装（全局）

npm i -g vue-cli

③查看是否安装成功

vue --version

④查看使用帮助

vue --help

  Usage: vue <command> [options]

  Options:

    -V, --version  output the version number
    -h, --help     output usage information

  Commands:

    init           generate a new project from a template
    list           list available official templates
    build          prototype a new project
    create         (for v3 warning only)
    help [cmd]     display help for [cmd]

⑤查看可用的官方模板

vue list

Available official templates:

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

⑥基于官方模板初始化项目骨架

// 执行该命令，vue cli 会在当前目录下创建一个webpack模板的项目
// 执行以下命令后，会出现向导式的基本信息配置
vue init webpack 项目名称

? Project name demo                       //项目名称
? Project description A Vue.js project    //项目简介
? Author Eric                             //项目作者信息
? Vue build standalone                    
? Install vue-router? Yes                 //是否使用vue-router
? Use ESLint to lint your code? Yes       //是否使用代码校验工具
? Pick an ESLint preset Standard          //选择代码风格
? Set up unit tests No                    //单元测试
? Setup e2e tests with Nightwatch? No     //端到端测试
? Should we run `npm install` for you after the project has been created? (recommended) npm   //使用npm

⑦运行项目

三、vue-cli4

①卸载vue-cli2

# 卸载
npm uninstall vue-cli -g
# 检测：如果没有版本则卸载成功
vue -V

②安装vue-cli4

# 安装
npm install -g @vue/cli
# 检测：显示4.0以上则安装成功
vue -V

③vue-cli4创建项目：使用图形界面

vue ui

④vue-cli4创建项目:命令行

vue create 项目名称

⑥。。。。