vue-cli3.0脚手架使用

向右看齐 2022-02-23 13:27 218阅读 0赞

一、准备

**安装node**

①选择对应系

统进行下载，下载完成直接安装即可

[http://nodejs.cn/download/][http_nodejs.cn_download]

//输入一下命令，成功输入版本即为安装成功
    node -v

**安装vue-cli3**

1.首先看看自己的版本

![2019040812280686.png][]

2.不是3.xx就把它卸载

![20190408123014159.png][]

3.安装vue-cli3

npm install -g @vue/cli

![20190408123113308.png][]

4.很遗憾，由于npm服务器在国外，下载东西很慢，慢到失败。。。

由此我们可以使用它们cnpm来安装，输入

npm install -g cnpm --registry=https://registry.npm.taobao.org

![2019040812343115.png][]

5.查看是否安装成功

![20190408123503576.png][]

6.OK，再来安装vue-cli3，输入 cnpm install -g @vue/cli

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70][]

6.安装成功，检测一下

![20190408123656681.png][]

二、建项目

1.vue create projectName （ **文件名 不支持驼峰（含大写字母）**）

下面的问题是：是否使用淘宝镜像的方式代替npm安装这些项目，是

![20190408123903188.png][]

有点尴尬的地方是，我在government位置下创建的项目，于是

![20190408124205421.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70 3][]

3.模板创建完成，然后下载完成

![20190408124719501.png][]

4.需要对webpack进行配置的话，要手动在根目录下新建一个vue.config.js文件

module.exports = {
      // 基本路路径, vue.cli 3.3以前请使⽤用baseUrl
      publicPath: '/', // 默认'/'，部署应用包时的基本 URL
      outputDir: 'dist', // 'dist', 生产环境构建文件的目录
      assetsDir: '', // 相对于outputDir的静态资源(js、css、img、fonts)目录
      lintOnSave: false,
      runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
      productionSourceMap: true, // 生产环境的 source map
    
      devServer: {
        port: 8080,
        proxy: {
          '/government': {
            target: 'http://http://192.168.3.109:8088/',
            changeOrigin: true,
            pathRewrite: {
              '^government': 'government'
            }
          }
        }
      }
    }

5.然后再运行npm run serve即可

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70 4][]

[http_nodejs.cn_download]: http://nodejs.cn/download/
[2019040812280686.png]: /images/20220223/23a629d73dba4cd9af0750f2e89eb5e9.png
[20190408123014159.png]: /images/20220223/ff9c3b16e7d648ebbf2c8edb1df0fdf2.png
[20190408123113308.png]: /images/20220223/7eb90f72e7f543a3a3de0232834998b5.png
[2019040812343115.png]: /images/20220223/cfae8a3cd70b4a1cb381bb2ffaa44595.png
[20190408123503576.png]: /images/20220223/418f5961a4054fb884b0ee30f16eb17d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70]: /images/20220223/8595cebcbf4448259ff74d78c5d0adcc.png
[20190408123656681.png]: /images/20220223/24d40b7102334f7a9b4bad4dbcf249c3.png
[20190408123903188.png]: /images/20220223/f799e063aa8b4968928bcbe4058147f4.png
[20190408124205421.png]: /images/20220223/a903725319ef4723b0ad1c70901ea7f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70 1]: /images/20220223/e4bdc83aa2244c4ab09c7ffea1c36625.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70 2]: /images/20220223/6dd6a5d951394714ab21d6f15b4e7eda.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70 3]: /images/20220223/600593614eb1438e8975c43adf8460b1.png
[20190408124719501.png]: /images/20220223/6f6d72b9ac1441cdaed169955d6681f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70 4]: /images/20220223/01290160d47040158025789ceae63fe4.png