webpack: vue-cli 脚手架环境搭建

一、搭建 vue-cli 脚手架环境

• 1、在一个新的文件夹下面，打开命令窗口

vue create  项目名称（例如webpack-vue-mobile）

基本选择：

image.png

用什么写样式

image.png
代码用什么模式
image.png image.png
image.png

• 2、安装完后会看到终端出现如下显示

  
  image.png

• 3、执行上述的两个命令，会发现我们创建的 脚手架 目录如下

  
  image.png

二、个人配置 vue-cli

• 1. 但是我们执行 npm run serve 没有帮我们自动打开浏览器，我们可以配置下。我们在 根目录 下面 新建一个 vue.config.js 文件夹，如下：

     
     image.png
• 2、vue.config.js 中的配置会 覆盖 默认的 webpack 配置（node_modules）中的配置，我们在 vue.config.js 中配置一个开发配置

// 这里面配置的内容，会覆盖默认的 webpack 配置
module.exports = {
    devServer: {
        open: true,     // 配置自动打开浏览器
        port: 3000,     // 配置端口号
    }
}

• 3、重新运行项目

npm run server

• 4、vue.config.js 配置运行项目后，它会自动帮我们打开浏览器。如下，端口正是我们配置的 3000

  
  image.png