vue-cli + webpack + sass 搭建一个工程化项目

版权声明:https://blog.csdn.net/wexin_37276427 https://blog.csdn.net/wexin_37276427/article/details/82263506

环境安装

1、首先安装 node的环境,官网地址这里
检查是否安装成功

node -v  //node的版本
npm -v   //npm是node的包管理器

如果出现 “ 不是内部或外部命令,也不是可运行的程序
或批处理文件。”需要到环境变量中进行配置
 node -v
v10.5.0
 npm -v
6.1.0

2、安装vue-cli

由于npm的服务器在国外,网速慢而且安装容易失败,建议在安装之前,先安装国内的镜像,比如淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完之后就可以使用 cnpm 命令了

全局安装 vue-cli
cnpm install vue-cli -g 

创建项目

vue init webpack(基于模板) my-Project    //初始化基于webpack模板项目
cd my-Project
cnpm install  //安装依赖
cnpm run dev //运行项目

在webpcak中配置sass

安装sass-loader, node-sass.因为sass-loader依赖于sass-loader
cnpm install sass-loader node-sass --save

下载安装完之后,webpack是没有配置sass-loader的,需要手动配置一下。
build 目录下的 文件 webpack.base.conf.js 下的module规则下配置:

test: /\.scss$/,
include: '/src/',
loaders: ['style-loader', 'css-loader', 'sass-loader']

图片
在单文件组件中引用

图片
重新运行项目, 如果没有编译出错,说明配置成功

npm run dev
阅读更多
换一批

没有更多推荐了,返回首页