已安装node,第一次安装vue-cli
1.全局安装webpack
npm install -g webpack
2全局安装vue-cli
npm install –g vue-cli
3.新建vue项目 myVue
vue init webpack myVue
之后一直按回车
输入cd myVue按回车进入项目文件夹
输入npm run dev按回车启动项目
4.适配ie9
安装 npm i babel-polyfill --save-dev
然后在main.js中的最前面引入babel-polyfill ： import'babel-polyfill'
在index.html内加入代码 :
<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
在config中的webpack.base.conf.js中,修改编译配置
entry:{app:['babel-polyfill','./src/main.js']}
在index.html中加入代码兼容consloe.log
<script>
if(!window.console){
window.console={
log:function(msg){},
err:function(msg){}
}
}
</script>
5.引入element-ui
安装 npm i element-ui -S
npm i element-ui -S
在main.js中写引入代码
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Element);
到这一步启动时报错
解决办法：关闭vue-cli脚手架eslint
1.打开 build文件夹下面的webpack.base.conf.js;
2.找到下面这段代码，并将它注释掉：
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
// }
})
再次启动，启动成功
6elementUI实现自定义主题
安装主题工具
npm i element-theme -g
安装chalk主题
npm i element-theme-chalk -D
初始化变量文件
et -i [可以自定义变量文件，默认为element-variables.scss]
> ✔ Generator variables file
这时根目录下会产生element-variables.scss（或自定义的文件），大致如下：
$--color-primary: #409EFF !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
$--color-success: #67c23a !default;
$--color-warning: #eb9e05 !default;
$--color-danger: #fa5555 !default;
$--color-info: #878d99 !default;
修改变量
直接编辑 element-variables.scss 文件，例如修改主题色为自己所需要的颜色（如： 紫色（purple））
$--color-primary: purple;
修改完变量后，要编译主题（如果编译后，再次修改了变量，需要重新编译）
et
> ✔ build theme font
> ✔ build element theme
最后一步，将编译好的主题文件引入项目（编译的文件默认在根目录下的theme文件下，也可以通过 -o 参数指定打包目录），在入口文件main.js中引入"import '../theme/index.css'"
// element-ui
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '../theme/index.css' //引入主题文件
Vue.use(Element);
7.引入less
1.第一步 安装less和less-loader，命令如下
npm install less less-loader --sava-dev
2.第二步 打开build/webpack.base.conf.js，在module.exports 对象中添加依赖
module.exports = {
module: {
rules: [
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}
]
}
3.第三步 在代码中的style标签中加上 lang="less" 就可以使用了
<style scoped lang="less">
</style>
