Vue CLI v3.3.0 快速创建并启动项目全过程

vue

vue cli 3 介绍

上次用vue的时候,vue cli的版本还是2,对应指令还是 vue init < 模板名称 > < 项目名称 >

  1. vue-cli提供的模板有:
  2. webpack             一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。
  3. webpack-simple      一个简单webpack+vue-loader的模板,不包含其他功能,让你快速的搭建vue的开发环境。
  4. browserify          一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。
  5. browserify-simple   一个简单Browserify+vueify的模板,不包含其他功能,让你快速的搭建vue的开发环境。
  6. simple*             一个最简单的单页应用模板。

最近用的时候,已经有vue cli 3了,大致跑了一下,

前期准备

卸载旧版本

vue cli 升级到3后,package的名字从 vue-cli 改为了 @vue/cli,装了旧版本的,官方的建议是,把旧版本的卸载了,再安装新版本。 

卸载指令如下: 
npm uninstall vue-cli -g or yarn global remove vue-cli

node版本

官方建议,node.js的版本,需要是8.9或者以上(建议是8.11.0+)

安装

安装指令如下: 
npm install -g @vue/cli or yarn global add @vue/cli

创建项目

  1. 执行:vue  create day2_vue.js 

  2. 此处有两个选择:

  • 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 / Formater 

3.按住enter进入下一步,接下来都是对之前每项选项的更详细的选择。

  • css选择SCSS/SASS
  • Linter / Formatter选择prettier
  • 这一步就是要选择配置文件的位置了。对于 Babel 、 PostCSS 等,都可以有自己的配置文件: .babelrc 、 .postcssrc 等等,同时也可以把配置信息放在 package.json 里面。此处出于对编辑器( Visual Studio Code )的友好支持(编辑器一般默认会在项目根目录下寻找配置文件),选择把配置文件放在外面,选择 In dedicated config files 

4.Save this as a preset for future projects?这个就是问要不要把当前的这一系列选项配置保存起来,方便下一次创建项目时复用。选择y。此时下次创建时就会直接引用次框架,如下图所示vue_tools就是我上次的框架,可以这次直接引用;

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

启动项目

初始完之后,进入到项目根目录:
$ cd day2_vue.js

启动项目:
$ npm run serve

稍等一会儿,可以看到自动在浏览器中打开了;

安装PostCSS插件

  • 通过Vue-cli构建的项目,在项目的根目录下有一个.postcssrc.js,默认情况下已经有了:

         

配置成

      

  • 安装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

}

}

}

详细创建过程如下

打包上线

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

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

实际上,在部署的时候要注意,假设静态服务器的域名是 http://static.baidu.com ,那么对应到访问 <项目根目录>/dist/index.html 的 URL 一定要是 http://static.baidu.com/index.html ,其他的静态资源以此类推。 

以上是 Vue CLI v3.3.0 快速创建并启动项目全过程 的全部内容, 来源链接: www.h5w3.com/js/374839.html

回到顶部