node+webpack+babel+vue2

最近初学vue,以前也没玩过node,参照着各种博客，完成了简单的环境搭建，步骤如下:

一、安装node.js(很简单，官网下载，一键到底安装)

安装完成后 node -v能出现版本号安装成功

二、环境配置（以下均为原生的npm,没有研究淘宝的cnpm）

1、新建项目，在开发工具或者目录中直接新建项目,在项目根目录执行一下命令

npm init -y

该命令可以生成package.json

2、配置webpack.js

我直接贴出我的配置，详细配置含义可以去官网查看

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
   mode:'production',
   entry: './app/main.js',
   output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'bundle.js',
       publicPath: 'public'
   },
plugins: [
new VueLoaderPlugin()
],
   module: {
       rules: [{
               test: /\.js$/,
               exclude: [
                   path.resolve(__dirname, "node_modules")
               ],
               loader: "babel-loader",
               options: {
                   presets: ["es2015"]
               }
           },
           {
               test: /\.vue$/,
               loader: 'vue-loader',
               options: {
                   loaders: {
                       js: 'babel-loader'
                   }
               }
           }
       ]
   },
   resolve: {
       alias: {
           'vue$': 'vue/dist/vue.common.js'
       }
   }

}

3、配置package.json

以下需要手动配置的只有标红位置，其他均是安装插件的时候自动插入的

{
"name": "HelloVue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"server": "webpack-dev-server --content-base ./ --port 8080"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^1.0.0",
"vue": "^2.5.17",
"vue-loader": "^15.4.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
}
}
4、安装webpack相关的插件

npm install --save-dev webpack

npm install --save-dev webpack-cli(这个是因为webpack版本较高，官网要求安装的)

npm install --save-dev webpack-dev-server

5、安装babel，这个是用来增强浏览器兼容的

npm install --save-dev babel-core

npm install --save-dev babel-loader

npm install --save-dev babel-preset-es2015

以上安装可能报错，重新安装npm install --save-dev babel-core@7就行，版本冲突

6、现在测试一下node+webpack+babel是否安装成功

项目结构如下，在index.html中配置

在 main.js中alert('hello'),

npm run server 访问localhost:8080能打印说明环境成功了

7、安装vue，此时已经可以进行vue的编码了

npm install --save-dev vue

8、以下步骤是为了使用vue loader的，将模板和样式抽成单独.vue文件

npm install --save-dev vue-loader（报警告需要css-loader）

npm install --save-dev css-loader

npm install --save-dev vue-template-compiler

从上可以看出，使用的均是最新版本，以上步骤可能出现2个错误和1个警告，如下：

a、警告:未指定具体的mode （我的台式机上访问会报错，笔记本暂时测试无问题）

The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

此处是warning，如果功能无影响，可以不配置

在webpack.config.js中配置mode:'production'

b、报错:无可用的插件，无法启动

vue-loader was used without the corresponding plugin.

在webpack.config.js中配置

const VueLoaderPlugin = require('vue-loader/lib/plugin');

plugins: [

new VueLoaderPlugin()

]

c、报错:无法找到vue或者页面无法打开，无法启动或者启动了无法访问（我的台式机上是无法启动，笔记本上是无法访问）

resolve: {

alias: {

'vue$': 'vue/dist/vue.common.js'

}

在webpack.config.js中配置

以下是简单的调色板代码效果:代码地址https://github.com/guochaolinGit/vue-hellovue

node+webpack+babel+vue2

猜你喜欢