继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

简单入门,搭建一个vue项目

笑笑_xxred
关注TA
已关注
手记 59
粉丝 30
获赞 171

简单入门,搭建一个vue项目

环境搭建

  • node.js
    • 官网直接下载安装,或者使用chocolatey
    • 使用chocolatey安装choco install nodejs
    • 安装chocolatey
  • webpack
    • npm install webpack -g
  • vue-cli脚手架
    • npm install vue-cli -g

初始化项目

  • vue-cli构建
    • vue init webpack project
    • 安装提示输入即可
  • 安装依赖
    • npm install
  • 运行

添加loader

  • loader文档
  • 通过加载器配置,告诉webpack打包的时候如何处理某个文件
  • 比如加载css
    • 安装加载器npm install --save-dev style-loader css-loader
    • webpack.config.js添加配置
  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
+   module: {
+     rules: [
+       {
+         test: /\.css$/,
+         use: [
+           'style-loader',
+           'css-loader'
+         ]
+       }
+     ]
+   }
  };

  • 添加其他加载器同理
  • 注意
    • 如果是在script中使用import ‘xx.css’,可用extract-text-webpack-plugin插件抽离出来
    • 有的时候出现Module build failed: Unknown word (1:1) removed by extract-text-webpack-plugin这个错
    • 在script中这样导入会很严格,如果找不到css里面引用的图片会编译不通过
    • 所以不建议在script里面引用css,那样打包css到js里面,也不方便维护,如果实在需要,则使用extract-text-webpack-plugin插件

配置别名和拓展名

  • 使用别名可以简化路径访问,配置拓展名引入文件可以不写拓展名
  • webpack.config.js中添加配置
  resolve: {
    extensions: ['.js', '.vue', '.json', '.css'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },

eslint检查设置

  • 有时候格式检查太过严格,需要设置排除项,比如排除test1文件夹
    • .eslintignore文件里面直接配置,把排除的文件夹写上去
    • 或者webpack.config.js中添加配置
  module: {
    rules: [
         test: /\.(js|vue)$/,
            loader: 'eslint-loader',
            enforce: 'pre',
            include: [resolve('src'), resolve('test')],
+            exclude: [resolve('src/test1')],
            options: {
              formatter: require('eslint-friendly-formatter'),
              emitWarning: !config.dev.showEslintErrorsInOverlay
            }
    ]
  }

将某个模块设置为全局变量

  • 比如兼容jquery的时候,可以将jquery注入到全局变量访问
  • webpack.config.js中添加配置
plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      'window.$666': 'jquery',
      jQuery: 'jquery',
      'window.$': 'jquery',
      'window.jQuery': 'jquery'
    })
  ]
  • 注意:
    • js使用jquery的名称需要与上面的配置的一样,才能被替换
    • 打包生成之后生成的代码,引用$的地方会被替换为__webpack_provided_window_dot_$,如果是在eval函数里面使用,那么不会被识别,因此执行的时候仍然会报找不到错
打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP