手把手教学前端工程化：vue脚手架

前端工程化

•  
• vue脚手架安装
• Element-UI安装

vue脚手架

1. 用于快速生成Vue项目基础架构，官网网址： https://cli.vuejs.org/zh/
2. 安装

npm install -g @vue/cli

     3.脚手架用法：必选项：Babel Router Linter/Formatter 使用配置文件

        （1） 基于交互式命令行，创建新版vue项目

vue create projectName 

       如下所示进行选择选项，切记多选的时候可以使用空格进行勾选。

Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

      勾选完毕后进行脚手架安装

Vue CLI v4.2.3
✨  Creating project in D:\JCWeb\heima\day20\1th.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


> yorkie@2.0.0 install D:\JCWeb\heima\day20\1th\node_modules\yorkie
> node bin/install.js

setting up Git hooks
done


> core-js@3.6.4 postinstall D:\JCWeb\heima\day20\1th\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall D:\JCWeb\heima\day20\1th\node_modules\ejs
> node ./postinstall.js

added 1157 packages from 845 contributors in 91.742s
�🚀  Invoking generators...
�📦  Installing additional dependencies...

added 126 packages from 55 contributors in 18.398s
⚓  Running completion hooks...

�📄  Generating README.md...

�🎉  Successfully created project 1th.
�👉  Get started with the following commands:

 $ cd 1th
 $ npm run serve

  根据提示输入命令,开始项目的运行。

$ cd 1th
$ npm run serve

点击进入网址后：

（2）基于图形化界面的方式，创建新版vue项目

在终端输入命令，进行安装

vue ui

    显示创建文件页面

  创建新文件

进行项目设置

如图所示进行勾选：

选择标准版本配置文件

下面提示要不要做成一个预设模板

好的进入到了仪表盘

点击运行按钮

运行成功：

 

（3）基于2.x版本的旧模式，创建旧版vue项目  

npm install -g @vue/cli-lint

vue init webpack projectName

（4）文件结构说明

 （5）vue脚手架自定义配置

|--通过package.json文件进行配置，不推荐！！！！

在package.json文件输入：

"vue":{
    "devServer":{
      "port":"9090",
      "open":true
    }
  }

 在终端输入命令：

npm run serve 进行运行

 |-- 在根目录下创建 vue.config.js文件 推荐使用

module.exports = {

    "devServer": {
        // 自动打开浏览器
        "port": "9090",//端口
        "open": true//打开
    }

}

进行运行后得到同样的结果。