vue+less环境配置

发表于


vue+less简单无图搭建流程

Vue项目的搭建

默认已经安装了npm，如没有安装npm和node请先安装

  1. 安装vue-cli脚手架构建工具。

    1
    npm install vue-cli -g

安装完以后输入

1
vue -V

如果正常显示版本号以后，就是安装成功的意思。

  1. 使用vue-cli来初始化项目。

    1. 首先先进入项目目录，例如我会进入WebstormProject文件夹

      WebstormProjects````
      1
      2. 然后就是初始化项目了，命令是	````vue init <template> <projectName>````，template的位置填写模版，projectName填写项目名称，例如我用webpack来初始化项目myProject

      vue init webpack myProject

      1
      2
      3
      3. 接下来就会开始向你确认需不需要一些配置，看个人需要选择回车或者其他回答。
      4. 现在的新建完以后似乎会自动帮你执行npm install 或者 yarn,所以安装完以后请直接进入工作目录,启动服务

    cd myProject
    npm run dev //这里也可以使用yarn dev

    1
    2
    3
    4
    5
    6
    7
    8
    9
    5. 成功启动以后即项目构建成功
    ## 配置less
    虽然我使用的是less但是其实sass的安装也是大同小异。
    1. 先安装less相应的依赖

    npm install less less-loader –save

    1
    2
    2. 然后在webpack.base.conf.js中配置相应的loader，在原来的rules的数组里加上

{
test: /.less$/,
loader: “style-loader!css-loader!less-loader”
}
````

  1. 大功告成。

参考网址： Vue 2.0 项目创建+Element-ui+Less+typescript