1、安装webpack

npm install -g webpack

2、安装sass

npm install --save-dev sass-loader
npm install --save-dev node-sass

3、打开vscode的终端,创建vue程序,并创建vue程序

vscode新建终端:ctrl+shift+`,如果已经打开终端,无需新开终端

创建vue程序

vue init webpack myvue

4、配置sass支持

修改文件:build/webpack.base.conf.js

在rules节点中添加如下配置

{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}

5、在style中,增加lang="scss"

不需要使用sass时,可以忽略sass支持的配置

6、运行vue

cd 项目目录
npm run dev

7、生成vue

npm run build

生成的代码,在未修改配置的前提下,在dist目录中

ps.

1、webpack的高版本并没有完全向下兼容,所以在编译时,如果版本不对,可能会导致出现错误

折腾vue--使用vscode创建vue项目(二)的更多相关文章

  1. 在使用vue+webpack模版创建的项目中使用font-awesome

    前言:最近使用vue+webpack进行一个小项目的开发,按照官方模版文档完成项目初始化后打算引入ont-awesome字体图标库进行使用,引入过程中遇到一些问题并解决,现记录如下. 一开始进展很顺利 ...

  2. Eclipse+Maven创建webapp项目<二> (转)

    Eclipse+Maven创建webapp项目<二> 1.开启eclipse,右键new——>other,如下图找到maven project 2.选择maven project,显 ...

  3. Eclipse+Maven创建webapp项目<二>

    Eclipse+Maven创建webapp项目<二> 1.开启eclipse,右键new——>other,如下图找到maven project 2.选择maven project,显 ...

  4. vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)

    第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...

  5. (尚018-第二章2.1)Vue使用vue-cli创建模板项目

    2.1.1 1)vue-cli是官方提供的脚手架工具(注意:脚手架本身是个库) 2)github:https://github.com/vuejs/vue-cli 3)作用:从https://gith ...

  6. IntelliJ IDEA 14 创建maven项目二

    前言: 在我的idea14使用maven创建web工程文章介绍了如何运用idea14创建maven项目--但有瑕疵,如下: 今天在群里交流才得知起因: 原来一直这样创建的--但结果都一样,均出现上面的 ...

  7. Eclipse+maven创建webapp项目<二>(转)

    原文地址:http://www.cnblogs.com/candle806/p/3439469.html 1.开启eclipse,右键new-->other,如下图找到maven project ...

  8. 关于VsCode创建Vue基础项目的步骤以及相关问题

    项目创建步骤: 1.  全局安装vue-cli 安装命令: npm install -g vue-cli 在vscode上打开一个终端,然后输入此命令(下为截图): 2. 安装webpack,打包js ...

  9. vue 2.0创建新项目

    参考链接  https://segmentfault.com/a/1190000011275993 背景在安装完node的基础上,机器什么都没安装参考上述链接 一.下载vue $ cnpm insta ...

随机推荐

  1. 自动化运维之Ansible入门

    Ansible简介 Ansible是什么? Ansible 简单的说是一个配置管理系统(ConfiGuration Management System).你只需要可以使用ssh访问你的服务器或设备.它 ...

  2. Docker底层架构之网络实现

    前言 Docker 的网络实现其实就是利用了 Linux 上的网络命名空间和虚拟网络设备(特别是 vethpair). 基本原理 首先,要实现网络通信,机器需要至少一个网络接口(物理接口或虚拟接口)来 ...

  3. Spring 核心功能演示

    Spring 核心功能演示 Spring Framework 简称 Spring,是 Java 开发中最常用的框架,地位仅次于 Java API,就连近几年比较流行的微服务框架 SpringBoot, ...

  4. 痞子衡嵌入式:ARM Cortex-M内核那些事(3.3)- 为AI,ML而生(M55)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是ARM Cortex-M55. 鼠年春节,大家都在时刻关心 2019nCoV 疫情发展,没太多心思搞技术,就在这个时候,ARM 不声不响 ...

  5. 如何写出优雅的Python代码?

    有时候你会看到很Cool的Python代码,你惊讶于它的简洁,它的优雅,你不由自主地赞叹:竟然还能这样写.其实,这些优雅的代码都要归功于Python的特性,只要你能掌握这些Pythonic的技巧,你一 ...

  6. 软件质量保障初探_Chris

    关于软件质量保障的体会 首先,软件质量保障的重要性不言而喻,书中说软件质量体现在以下方面 软件开发过程的可见性 软件开发过程的风险控制 软件内部模块,项目中间阶段的交付质量,项目管理工具的因素 软件开 ...

  7. 基于TensorFlow的MNIST手写数字识别-初级

    一:MNIST数据集    下载地址 MNIST是一个包含很多手写数字图片的数据集,一共4个二进制压缩文件 分别是test set images,test set labels,training se ...

  8. Docker容器到底是什么?

    Docker是一个开源的应用容器引擎,是近些年最火的技术之一,Docker公司从Docker项目开源之后发家致富把公司商标改为了Docker,收购了fit项目,整合为了docker-compose,前 ...

  9. android 基础学习笔记2

    1.容器布局 一.线性布局 (LineaLayout) 方向:orientation =vertical / horizontal 重力(对齐) :gravity =bottom/right/left ...

  10. java8 Stream API笔记

    生成Stream Source的方式 从Collection和数组生成 * Collection.stream() * Collection.parallelStream() * Arrays.str ...