从零开始自定义创建Vue-cli3.0

vue

前言；-- 进入前戏是非常重要的，请看以下内容！！！

1-）node版本

官方建议，node.js的版本，需要是8.9或者以上（建议是8.11.0+）

2-）更新vue cli

npm install -g @vue/cli

3-）创建项目

vue3.x同样支持这种方式：

vue init webpack project-name

4-）我们用最新的创建方式：

vue create projectName

5-）这里推荐选择第二个，第一个默认没有 router 和 vuex，

6-）这里如果你要玩TS就把第二个也勾选上. 其他的就按照我下面的一共5个勾选来.

7-）选择Y 是否使用history路由，这个看公司项目要求其实history和hash都还是比较ok的，只是有很多人觉着history太丑了. 哈哈

8-）这里就是 css的预编译器，看个人，反正我玩less

9-）大部分选择的是 ESlint +Standard config 因为标准规范吧这里我选择ESlint +Prettier，因为我自己再vscode安装了这个插件.还挺好用。

10-）选择何时进行代码检测，此处选择在保存时进行检测

11-）依然选择第一个

12-）你是否保存上一次的自定义选择，我这里选择 n 因为我可能太闲了吧。哈哈哈哈

13-）最后一步，那你就等项目开始创建吧，奥利给！！！

末言，不是遗言！！！看下图 emmmm

以下是2.0和3.0文件的区别

1-）任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。

例如，在public文件下放置一个images文件夹，images里面存放各种图片.

2.0

3.0

比如标签引入图片：

引入图片logo.png: <img src="/images/logo.png" alt="" width="100px">

再比如背景图片引入：

.login-wrapper {

position: fixed;

top: 0;

right: 0;

left: 0;

bottom: 0;

background: #1ab2ff url('/images/bg-img-4.jpg');

}

PS：

何时使用 public 文件夹

你需要在构建输出中指定一个文件的名字。

你有上千个图片，需要动态引用它们的路径。

有些库可能和 webpack 不兼容，这时你除了将其用一个独立的

送大家一份大礼包详细的目录结构详细解释.