前言
vue-cli作为一款mvvm框架语言(vue)的脚手架,集成了webpack环境及主要依赖,对于项目的搭建、打包、维护管理等都非常方便快捷。在开始项目之前,建议先熟悉vue.js基本语法。
基础项目的搭建
基础搭建
参考vue的官网介绍
其他依赖的添加
一、less的添加
第一步,安装less依赖
npm install less less-loader --save
第二步,
修改webpack.base.conf.js文件,配置loader加载依赖,让其支持外部的less,在原来的代码上添加
{ test: /\.less$/, loader: "style-loader!css-loader!less-loader", },
第三步, 然后在使用的时候在style标签里加上lang=”less”里面就可以写less的代码了(style标签里加上 scoped 为只在此作用域 有效)
<style lang="less" scoped> @import "home.less"; </style>
二、jQuery的添加
第一步,安装jquery依赖
npm install jquery --save
第二步,
修改webpack.base.conf.js文件
1.引入
resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'jquery': resolve('node_modules/jquery/src/jquery'), } },2.声明
plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", }) ]
注:其他地方无需引入,其中自动生成的如下代码需要删除(原因未定)
const createLintingRule = () => ({ test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter'), emitWarning: !config.dev.showEslintErrorsInOverlay } })
node: { // prevent webpack from injecting useless setImmediate polyfill because Vue // source contains it (although only uses it if it's native). setImmediate: false, // prevent webpack from injecting mocks to Node native modules // that does not make sense for the client dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', child_process: 'empty' }
三、layui-layer的添加
第一步,安装 layui-layer 依赖
npm install layui-layer --save
第二步,
修改webpack.base.conf.js文件
1.引入
2.声明resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'jquery': resolve('node_modules/jquery/src/jquery'), 'layer': resolve('node_modules/layui-layer/layer') } },
plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", layer: "layer" }) ],注意事项同jquery