vue-cli 知识点

  • vue init webpack [project_name] 构建的项目,新增功能需要做的工作:
新增功能 需要做的工作
pug 安装pug即可,运行命令:yarn add pug --dev
stylus 安装stylus、stylus-loader即可,运行命令:yarn add stylus stylus-loader --dev
使用tab 文件.editorconfig中的行:indent_size = 2改成indent_size = 4;
文件.eslintrc.js中'rules': {}里,新增行:'indent': [2, 4, { "SwitchCase": 1 }]
  • 用法:
    vue init

  • 其中,template-name 共5种:

  1. webpack
  2. webpack-simple
  3. browserify
  4. browserify-simple
  5. simple
  • 举例:
    vue init webpack [project-name]

  • 使用 vue init webpack [project-name] 创建的项目,配置了 stylus,使用 stylus 编辑 css 时,有时会报错,找到报错的地方,一般出现错误如下:

.demo 
    top 10px
    left 20px

编译后,出现这种情况:

.demo top 20px {
    left: 20px;
}

此时,需要编辑相应位置:选中本行和上一行之间的空白部分,按 enter 键。

  • 问题: vue-cli init webpack 构建的项目,js文件tab是2个空格(应该也是4个空格),.vue文件tab是4个空格,未知原因,待解决???
    解决:不要选中多行,一行一行的处理。

  • vue-cli 构建的项目,主目录下有个static文件夹,可以存放静态文件。
    运行打包命令:npm run build 后,这个文件夹下的文件(夹)会按照原本的结构放在网站根目录下,这时我们再去使用/static绝对路径,就可以访问这些静态文件了。

  • BundleAnalyzerPlugin 的插件使用
    BundleAnalyzerPlugin 是分析 Webpack 生成的包体组成并且以可视化的方式反馈给开发者的插件。
    vue-cli 已经默认集成了该插件. 如果你运行 npm run build -report.就能看到当前项目的依赖情况.然后做出相应调整.

  • 如何在index.html里引入静态css和js?
    src目录下的资源只能import或require。
    想静态引入的话,把静态资源放入与src同级的目录static里,html的引入路径如下:static/...

  • 项目目录 static 文件夹里的内容,build 后会在 dist/static 文件夹的相应位置。

posted on 2017-05-31 10:22  cag2050  阅读(308)  评论(0编辑  收藏  举报

导航