1、初始化项目

npm i -g @vue/cli 下载vue-cli脚手架（点击进入了解vue-cli）

vue -V查看版本号3.2.1（注意是大写-V）

​ npm init得到packjson.js文件。

2、下载node_modules

​ npm i或者cnpm i

3、新建webpack配置文件

新建webpack.config.js并配置webpack如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
// webpack  配置
// 入口
// 出口
// 规则
// 插件

// js  / png / scss/less/css
// .vue 单文件组件

const path = require("path");  // node 模块 处理路径逻辑
const htmlWebpackPlugin = require("html-webpack-plugin");  // 操作HTML
const openBrowserWebpackPlugin = require("open-browser-webpack-plugin"); // 打开浏览器
const extractTextWebpackPlugin = require("extract-text-webpack-plugin")  // 抽离样式 样式独立出去

module.exports = {
    entry:[ "./src/main.js"],
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:"js/[name].[hash:8].js",  // 生成 hash规则解密解析的长度为8 的随机字符串  阻止浏览器缓存
        publicPath:"", // 公共路径 上线需要配置
    },
    devtool:"source-map",

    resolve:{
        alias:{  // 别名
            'vue':'vue/dist/vue.js'
        }
    },

    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:['babel-loader']
            },
            {
                test:/\.(png|gif|svg|jpg|woff|woff2|eot|ttf)\??.*$/,
                use:["url-loader?limit=8192&name=font/[hash:8].[name].[ext]"]   // 8M  ext扩展名
            },
            {
                test:/\.(css|scss)$/,
                use:extractTextWebpackPlugin.extract({
                    fallback:"style-loader",  // 转化为 node 风格代码
                    use:[  "css-loader",    //  css 转化为 commonJs模块
                        {
                            loader:"postcss-loader",  // 模块
                            options:{
                                plugins:function(){
                                    return [
                                        require("cssgrace"), // 美化 css
                                        require("autoprefixer")() // 自动补全 实现兼容
                                    ]
                                }
                            }
                        },
                        "sass-loader"   //  编译 scss 为 css 代码
                    ],
                })
            },
            {
                test:/\.(css|less)$/,
                use:extractTextWebpackPlugin.extract({
                    fallback:"style-loader",  // 转化为 node 风格代码
                    use:[  "css-loader",    //  css 转化为 commonJs模块
                        {
                            loader:"postcss-loader",  // 模块
                            options:{
                                plugins:function(){
                                    return [
                                        require("cssgrace"), // 美化 css
                                        // require('postcss-px2rem-exclude')(
                                        //     {
                                        //         remUnit:100,
                                        //         exclude:/element-ui/i,  // 排除 mint-ui 不需要进行 rem 转换
                                        //     }
                                        // ), // px 转 rem
                                        require("autoprefixer")() // 自动补全 实现兼容
                                    ]
                                }
                            }
                        },
                        "less-loader"   //  编译 scss 为 css 代码
                    ],
                })
            },
            {
                test:/\.vue$/,
                loader:'vue-loader',
                options:{
                    loaders:[
                        {'css':'style-loader!css-loader'},
                        {'scss':'style-loader!css-loader!sass-loader'},
                        {'less':'style-loader!css-loader!less-loader'},
                    ]
                }
            }
        ]
    },

    devServer:{
        contentBase:path.join(__dirname,"dist"),
        compress:true,
        hot:true,
        inline:true,
        host:"0.0.0.0",
        port:7000,
        // open:true,
        publicPath:"",
        proxy:{    // 代理

        },
        // historyApiFallback:true  // 处理 history 路由模式
    },

    plugins:[
        new htmlWebpackPlugin({
            template:"./src/index.html", //声明 编译 HTML 文件
            inject:true,  // 自动注入 css/js link script
        }),

        new openBrowserWebpackPlugin({url:"http://localhost:7000"}),

        new extractTextWebpackPlugin({
            filename:'css/app.[hash:8].css',
            allChunks:true , // 抽离所有的数据
            disable:false   // true 无法样式抽离
        })
    ]
}

4、新建工程文件夹

结构如下：

image-20181220195841691

5、需要下载的插件通过下面packjson.js即可全部下载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
{
  "name": "my-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --inline --hot"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {//按照配置文件只能下载到14个插件(差less,sass-node,webpack@3.8.1)
    "autoprefixer": "^9.4.3",
    "babel-core": "^6.26.3",//请使用本版本号 配置es6
    "babel-loader": "^7.1.5",//请使用本版本号 配置es6
    "babel-preset-env": "^1.7.0", //配置es6
    "css-loader": "^2.0.1",
    "cssgrace": "^3.0.0",
    "extract-text-webpack-plugin": "^2.1.2",//请使用本版本号
    "file-loader": "^2.0.0", //处理图片规则
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "node-sass": "^4.11.0",
    "open-browser-webpack-plugin": "^0.0.5",
    "postcss-loader": "^3.0.0",
    "postcss-px2rem-exclude": "^0.0.6",//手机端rem转换
    "sass-loader": "^7.1.0",
    "source-map": "^0.7.3",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",//处理图片规则
    "vue-loader": "^13.7.1",//请使用本版本号
    "vue-template-compiler": "^2.5.17",//请使用本版本号，与vue版本对应
    "webpack": "^3.8.1",//请使用本版本号
    "webpack-dev-server": "^2.9.3"//热替换
  },
  "dependencies": {
    "axios": "^0.18.0",
    "element-ui": "^2.4.11",
    "vue": "^2.5.17",//请使用本版本号
    "vue-resource": "^1.5.1",
    "vue-router": "^3.0.2"
  }
}

资源链接

  1. https://webpack.js.org/concepts/#output
  2. http://element-cn.eleme.io/#/zh-CN/component/container
  3. https://cn.vuejs.org/v2/guide/single-file-components.html
  4. https://www.mayn.com.cn/html/index.htm
  5. https://www.giorgioarmanibeauty.cn/make_up/
  6. http://element-cn.eleme.io/#/zh-CN/component/dropdown（PC）
  7. http://mint-ui.github.io/docs/#/zh-cn2/action-sheet（phone）