Vue开发环境搭建

用的老版本，好不容易装上了
安装node，npm，vue

参照此文章配置node和webpack

gitbash或cmd下验证是否安装成功查看版本号
webpack-cli -v
3.3.12
webpack -v
4.46.0
npm -v
6.14.11
别忘了安装vue.js
npm install vue vue-cli -g
-g 表示全局安装

运行vue
创建新项目
vue init webpack my-project
注意，我们使用vue都是在webpack前提下使用的
安装依赖
cnpm install
试过npm install 不好用会报其他错误如 Cannot find module ‘webpack/bin/config-yargs’
如果没安装cnpm淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装就可以，如果卡住可能应为npm版本过低，重装高版本node.js
本地默认端口运行
npm run dev

```c
13% building modules 31/37 modules 6 active ...t\myapp\src\components\HelloWorl 
13% building modules 32/37 modules 5 active ...ue-loader\lib\component-normaliz 
13% building modules 33/37 modules 4 active ...ue-loader\lib\component-normaliz 
14% building modules 34/37 modules 3 active ...ue-loader\lib\component-normaliz 
14% building modules 35/37 modules 2 active ...ue-loader\lib\component-normaliz 
14% building modules 36/37 modules 1 active ...ue-loader\lib\component-normaliz 
14% building modules 37/38 modules 1 active ...yapp\node_modules\ansi-regex\ind 
14% building modules 38/39 modules 1 active ...\html-entities\lib\surrogate-pai 
14% building modules 39/40 modules 1 active ...les&index=0!D:\test\myapp\src\Ap 
14% building modules 40/41 modules 1 active ...t\myapp\src\components\HelloWorl 
14% building modules 41/42 modules 1 active ...--2!D:\test\myapp\src\assets\log 
94% asset optimization ERROR  Failed to compile with 2 errors上午10:51:19

 error  in ./src/App.vue

Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
    at Object.pitch (D:\test\myapp\node_modules\_extract-text-webpack-plugin@3.0.2@extract-text-webpack-plugin\dist\loader.js:57:11)

 @ ./src/App.vue 2:2-431
 @ ./src/main.js
 @ multi ./node_modules/webpack-dev-server/client?http://localhost:8080 webpack/

报错
参考解决方案
在 webpack.dev.conf.js 中添加 extract-text-webpack-plugin 配置如下。重启 $ npm start 可以看到此时项目被成功启动，并且在浏览器中可以看到 Vue 的欢迎界面。


const ExtractTextPlugin = require('extract-text-webpack-plugin')
 
........
 
 
plugins: [
    .............
    // extract css into its own file
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),
      // set the following option to `true` if you want to extract CSS from
      // codesplit chunks into this main css file as well.
      // This will result in *all* of your app's CSS being loaded upfront.
      allChunks: false,
    }),
  ]

链接：报错 找不到这个extract-text-webpack-plugin插件
然后重新npm run dev

目前用的webpack都是低版本，高版本在这里会出现一些问题，低版本则没有，注意版本问题