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. Linux 常用工具sysstat之sar

    sysstat包 iostat.sar.sa1和sa2命令都是sysstat包的一部分.它是Linux包含的性能监视工具集合: sar:收集.报告或存储信息(CPU.内存.磁盘.中断.网卡.TTY.内 ...

  2. springBoot 整合 dubbo 遇到的坑

    一.注意springBoot 和 dubbo 之间版本的问题 <?xml version="1.0" encoding="UTF-8"?> < ...

  3. Leetcode 题目整理-3 Palindrome Number & Roman to Integer

    9. Palindrome Number Determine whether an integer is a palindrome. Do this without extra space. clic ...

  4. vue中如何在本地导入js文件

    import {setStore,setUser,getStore,removeStore} from "../../../public/localstory" 在导入js文件时, ...

  5. 【限时免费】近1000G JAVA学习视频下载

    2020的情人节是个极特殊的情人节,面对肆虐的疫情,我们无法出门,宅在家里,也无法阻止你作为一名优秀程序员的梦想. 或许没有鲜花.没有蛋糕…… 姜小白就为大家备好了一份大礼,将自己近几年整理收藏的全网 ...

  6. HDU_1864_01背包

    http://acm.hdu.edu.cn/showproblem.php?pid=1864 题目好像是输入的数据都是两位小数,先统计能报销的发票,然后把小数*100变成成熟就是01背包问题了. #i ...

  7. VMware Workstation 14 Pro 安装 CentOS 7 Linux 虚拟机

    CentOS 7 下载地址:http://isoredirect.centos.org/centos/7/isos/x86_64/ ,选择 CentOS-7-x86_64-DVD-1908.iso : ...

  8. 用例建模Use Case Modeling——传感器智能分析引擎

    系统用例分析 我的工程实践小组做的课题主要是实现传感器数据采集平台的设计与开发.该搜索引擎完成对传感器数据的采集和发布,企业可以在平台上上传自己的传感器数据信息,同时也能够浏览市面上其他传感器信息,以 ...

  9. To be contine ,NW NMM backup sqlserver failed.

    Last time, we talk about separate under one cluster backup into two diffetent AG backup. Does it wor ...

  10. OsgEearh 中的 FeatureEditor的实现原理

    先来看看FeatureEditor的用法: const osgEarth::SpatialReference* mapSRS = mapNode->getMapSRS(); osgEarth:: ...