总结：vue cli脚手架初步学习——安装方法及可能会遇到的坑

最近终于是抽出空来学习了，想要学习好久的脚手架，根据B站的视频进行了大致的学习，借用了老师的两张笔记截图哈哈。以下是针对跟我一样从0开始学习的小白们，整理出来的内容，因为之前也从网上搜到好多关于vue学习的东西，奈何自己太菜看不懂啊，现在整理下方便自己，也同时方便下大家，有问题的同学在下面留言。

附一下B站老师的视频传送门，讲的真的很好，剖析精准，我还没看完，慢慢研究\(^o^)/~。 

最全最新Vue、Vuejs教程，从入门到精通_哔哩哔哩_bilibili

一、安装npm和node.js

可以检查下电脑是否存在

win+R 然后输入cmd，输入指令

若没有的话则进行安装：

（1）npm推荐使用淘宝镜像安装

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

 （2）node.js没有的去下载对应的电脑版本

http://nodejs.cn/download/

二、安装vue cli 3.x.x或者vue cli 2.x.x

注：项目名称不可有大写字母，有大写会报错提示的

npm install @vue/cli -g （-g是全局安装）

vue --version （查看版本）

npm install @vue/cli-init -g （在3的基础上想用2的话输入指令）

vue init webpack my-project （vue cli2初始化项目）

vue cli2安装示例：（需要在要创建项目的目录下执行命令）

vue create my-project （vue cli3初始化项目）

vue cli3安装示例：（需要在要创建项目的目录下执行命令）

vue cli3安装时若保存了设置，下次创建时则会在第一步出现上次保存的配置，可快捷创建项目

该快捷创建可通过以下方式删除：

删除选中的代码即可

三、关于打包出现的问题

打包访问index.html文件会发现

以下是解决方式

（1）vue cli2需要打开config/index.js文件，将build->assetsPublicPath改为“./”，即可，就是前面加个点

（2）vue cli3 则需要在其文件夹的根目录创建vue.config.js文件

以下应该是最简洁的vue.config.js文件的代码了（我搜到的）

const path = require('path');
function resolve (dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    lintOnSave: true,
    chainWebpack: (config)=>{
        config.resolve.alias
          .set('@$', resolve('src'))
          .set('assets',resolve('src/assets'))
          .set('components',resolve('src/components'))
          .set('layout',resolve('src/layout'))
          .set('base',resolve('src/base'))
          .set('static',resolve('src/static'))
    },
    publicPath:'./'
}

（3）在这之后，根目录下操作命令输入npm run build即可打包，然后把生成的dist文件夹上传到服务器即可 ，访问即可