vue3.0快速创建项目

前置条件

更新npm到最新版本
命令行运行: 

npm install -g npm

npm就自动为我们更新到最新版本

使用 npm 全局安装 vue-cli ：

npm i -g @vue/cli

创建项目

执行：

vue create my-project   // my-project是要创建的文件夹

此处有两个选择：

default (babel, eslint) // 默认套餐，提供babel和eslint支持

Manually select features // 自己去选择需要的功能，提供更多的特性选择。

比如如果想要支持 TypeScript ，就应该选择这一项。

可以使用上下方向键来切换选项。

如果只需要 babel 和 eslint 支持，那么选择第一项，就完事了，静静等待 vue 初始化项目。

vue-cli 内置支持了8个功能特性，可以多选：使用方向键在特性选项之间切换，使用空格键选中当前特性，使用 a 键切换选择所有，使用 i 键翻转选项。

对于每一项的功能，此处做个简单描述：

TypeScript                //支持使用 TypeScript 书写源码
Progressive Web App (PWA) //Support PWA 支持。
Router                    //支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors        //支持 CSS 预处理器。
Linter / Formatter        //支持代码风格检查和格式化。
Unit Testing              //支持单元测试。
E2E Testing               //支持 E2E 测试。

我选择了 Router，Vuex，CSS Pre-processors，Linter / Formatter

按住enter进入下一步，接下来都是对之前每项选项的更详细的选择。
css选择SCSS/SASS

Linter / Formatter选择prettier

这一步就是要选择配置文件的位置了。

对于Babel 、 PostCSS 等，都可以有自己的配置文件：.babelrc 、 .postcssrc 等等，同时也可以把配置信息放在 package.json 里面。此处出于对编辑器（ Visual Studio Code ）的友好支持（编辑器一般默认会在项目根目录下寻找配置文件），选择把配置文件放在外面，选择 In dedicated config files
待补充
Save this as a preset for future projects?

这个就是问要不要把当前的这一系列选项配置保存起来，方便下一次创建项目时复用。选择y。

选完之后， vue-cli 就根据前面选择的内容，开始初始化项目了。

启动项目

初始完之后，进入到项目根目录： cd my-project 启动项目： npm run serve 稍等一会儿，可以看到自动在浏览器中打开了

安装PostCSS插件
通过Vue-cli构建的项目，在项目的根目录下有一个.postcssrc.js，默认情况下已经有了：

module.exports = {
        plugins: {
          autoprefixer: {}
        }
}

5
配置成

module.exports = {
        plugins: {
          "postcss-import":{},
          "postcss-url":{},
          "autoprefixer": {}
        }
}

安装postcss-import和postcss-url插件

$ npm install postcss-import和$ npm install postcss-url postcss-import相关配置点击这里。主要功有是解决@import引入路径问题。使用这个插件，可以让你很轻易的使用本地文件、node_modules或者web_modules的文件。这个插件配合postcss-url让你引入文件变得更轻松。

postcss-url相关配置可以点击这里。该插件主要用来处理文件，比如图片文件、字体文件等引用路径的处理。在Vue项目中，vue-loader已具有类似的功能，只需要配置中将vue-loader配置进去。
autoprefixer插件是用来自动处理浏览器前缀的一个插件。如果你配置了postcss-cssnext，其中就已具备了autoprefixer的功能。

在配置的时候，未显示的配置相关参数的话，表示使用的是Browserslist指定的列表参数，你也可以像这样来指定last 2 versions 或者 > 5%。如此一来，你在编码时不再需要考虑任何浏览器前缀的问题，可以专心撸码。这也是PostCSS最常用的一个插件之一。

配置插件

我们要完成vw的布局兼容方案，或者说让我们能更专心的撸码，还需要配置下面的几个PostCSS插件：

postcss-aspect-ratio-mini
postcss-px-to-viewport
postcss-write-svg
postcss-cssnext
cssnano
postcss-viewport-units

要使用
安装成功后，在项目根目录下的package.json文件中，可以看到新安装的依赖包：

"dependencies": {
    "cssnano": "^3.10.0",
    "postcss-aspect-ratio-mini": "^0.0.2",
    "postcss-cssnext": "^3.1.0",
    "postcss-import": "^11.1.0",
    "postcss-px-to-viewport": "^0.0.3",
    "postcss-url": "^7.3.2",
    "postcss-viewport-units": "^0.1.4",
    "postcss-write-svg": "^3.0.1",
    "vue": "^2.5.16",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },

接下来在.postcssrc.js文件对新安装的PostCSS插件进行配置：

module.exports = {
  plugins: {
    "postcss-import": {},
    "postcss-url": {},
    //"autoprefixer": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": {
      utf8: false
    },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750, //视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 1334, //视窗的高度，根据750设备的宽度来置顶，一般指定1334，也可以不配置
      unitPrecision: 3, //指定'px'转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw', //指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines', '.g-vw-no'], //指定不转行为视窗单位的类，可以自定义，可以无限添加，建议定义一至两个通用的类名
      minPixeValue: 1, //小于或等于'1px'不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false //允许在媒体查询中转换'px'
    },
    "postcss-viewport-units": {},
    "cssnano": {
      preset: "advanced",
      autoprefixer: false,
      "postcss-zindex": false
    }
  }
}

特别声明：由于cssnext和cssnano都具有autoprefixer,事实上只需要一个，所以把默认的autoprefixer删除掉，然后把cssnano中的autoprefixer设置为false。对于其他的插件使用，稍后会简单的介绍。

由于配置文件修改了，所以重新跑一下npm run dev。

项目就可以正常看到了。接下来简单的介绍一下后面安装的几个插件的作用。

打包上线

在开发完项目之后，就应该打包上线了。 vue-cli 也提供了打包的命令，在项目根目录下执行： 

npm run build

执行完之后，可以看到在项目根目录下多出了一个 dist 目录，该目录下就是打包好的所有静态资源，直接部署到静态资源服务器就好了。

下面作个总结

Vue3.0 与 Vue2.0 区别：

一、创建项目命令的变化。

vue create my-project //vue3.0创建方式
vue init webpack my-project   //Vue2.0 创建方式

同时3.0 版本包括默认预设配置 和 用户自定义配置

  • TypeScript
  • Progressive Web App (PWA) Support
  • Router
  • Vuex
  • CSS Pre-processors
  • Linter / Formatter
  • Unit Testing
  • E2E Testing

二、 项目目录结构变化：

我们对比发现 vue-cli 3.0 默认项目目录相比 2.0 来说精简了很多。

  • 移除了配置文件目录， config 和 build 文件夹。
  • 移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中。
  • 在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件。

三.移除了配置文件目录后如何自定义配置。

从 3.0 版本开始，在项目的根目录放置一个 vue.config.js 文件, 可以配置该项目的很多方面。

vue.config.js 应该导出一个对象，例如：

module.exports = {
 baseUrl: '/',
 outputDir: 'dist',
 lintOnSave: true,
 compiler: false,
 // 调整内部的 webpack 配置。
 // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
 chainWebpack: () => {},
 configureWebpack: () => {},
 // 配置 webpack-dev-server 行为。
 devServer: {
  open: process.platform === 'darwin',
  host: '0.0.0.0',
  port: 8080,
  https: false,
  hotOnly: false,
  // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
  proxy: null, // string | Object
  before: app => {}
 }
 ....
}

调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象，该对象将会被 webpack-merge 合并入最终的 webpack 配置。

示例代码：配置 webpack 新增一个插件。

// vue.config.js
module.exports = {
 configureWebpack: {
  plugins: [
   new MyAwesomeWebpackPlugin()
  ]
 }
}

修改插件选项的参数你需要熟悉 webpack-chain 的 API 并阅读一些源码以便了解如何权衡这个选项的全部配置项，但是它给了你比直接修改 webpack 配置中的值更灵活且安全的方式。

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        return [/* new args to pass to html-webpack-plugin's constructor */]
      })
  }
}

四. ESLint、Babel、browserslist 相关配置：

  • Babel 可以通过 .babelrc 或 package.json 中的 babel 字段进行配置。

  • ESLint 可以通过 .eslintrc 或 package.json 文件中的 eslintConfig 字段进行配置。

  • 你可能注意到了 package.json 中的 browserslist 字段指定了该项目的目标浏览器支持范围。

五. 关于 public 目录的调整。

vue 约定 public/index.html 作为入口模板会通过 html-webpack-plugin 插件处理。在构建过程中，资源链接将会自动注入其中。除此之外，vue-cli 也自动注入资源提示( preload/prefetch ), 在启用 PWA 插件时注入 manifest/icon 链接, 并且引入(inlines) webpack runtime / chunk manifest 清单已获得最佳性能。

在 JavaScript 或者 SCSS 中通过 相对路径 引用的资源会经过 webpack 处理。放置在 public 文件的资源可以通过绝对路径引用，这些资源将会被复制，而不经过 webpack 处理。

小提示：图片最好使用相对路径经过 webpack 处理，这样可以避免很多因为修改网站根目录导致的图片404问题。

加载评论框需要翻墙