折腾vue--使用vscode创建vue项目(二)
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项目(二)的更多相关文章
- 在使用vue+webpack模版创建的项目中使用font-awesome
前言:最近使用vue+webpack进行一个小项目的开发,按照官方模版文档完成项目初始化后打算引入ont-awesome字体图标库进行使用,引入过程中遇到一些问题并解决,现记录如下. 一开始进展很顺利 ...
- Eclipse+Maven创建webapp项目<二> (转)
Eclipse+Maven创建webapp项目<二> 1.开启eclipse,右键new——>other,如下图找到maven project 2.选择maven project,显 ...
- Eclipse+Maven创建webapp项目<二>
Eclipse+Maven创建webapp项目<二> 1.开启eclipse,右键new——>other,如下图找到maven project 2.选择maven project,显 ...
- vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)
第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...
- (尚018-第二章2.1)Vue使用vue-cli创建模板项目
2.1.1 1)vue-cli是官方提供的脚手架工具(注意:脚手架本身是个库) 2)github:https://github.com/vuejs/vue-cli 3)作用:从https://gith ...
- IntelliJ IDEA 14 创建maven项目二
前言: 在我的idea14使用maven创建web工程文章介绍了如何运用idea14创建maven项目--但有瑕疵,如下: 今天在群里交流才得知起因: 原来一直这样创建的--但结果都一样,均出现上面的 ...
- Eclipse+maven创建webapp项目<二>(转)
原文地址:http://www.cnblogs.com/candle806/p/3439469.html 1.开启eclipse,右键new-->other,如下图找到maven project ...
- 关于VsCode创建Vue基础项目的步骤以及相关问题
项目创建步骤: 1. 全局安装vue-cli 安装命令: npm install -g vue-cli 在vscode上打开一个终端,然后输入此命令(下为截图): 2. 安装webpack,打包js ...
- vue 2.0创建新项目
参考链接 https://segmentfault.com/a/1190000011275993 背景在安装完node的基础上,机器什么都没安装参考上述链接 一.下载vue $ cnpm insta ...
随机推荐
- DRF框架之使用Django框架完成后端接口(API)的定义
学习DRF框架,首先我们就需要明白为什么要学习这个框架. 接下来我们就先用原生的Django框架来定义一个符合RESTful设计方法的接口(API). RESTful接口的需求如下: GET /boo ...
- SpringCloud与微服务Ⅶ --- Feign负载均衡
官方文档:https://projects.spring.io/spring-cloud/spring-cloud.html#spring-cloud-feign 一.Feign是什么 Feign是一 ...
- 聊聊SpringBoot | 第一章:快速搭建SpringBoot第一个应用
快速搭建SpringBoot第一个应用 1.简介 本章仅介绍如何快速搭建第一个SpringBoot应用,细节内容下一章再做讲解,如果有需要,各位可以直接到Spring官网去了解. 从 Spring B ...
- LeetCode 547. Friend Circles 朋友圈(C++/Java)
题目: https://leetcode.com/problems/friend-circles/ There are N students in a class. Some of them are ...
- 浅谈二分—— by hyl天梦
二分 解决范围 二分法可以用来解决这一系列具有单调性质的题,例如求单调函数的零点 其实在小学奥数中就用到了二分法 例如手动开根号,再比如猜数游戏 二分的具体过程就是先取一个中间值,判定一下正确答案在哪 ...
- Go语言之路—博客目录
Go语言介绍 为什么你应该学习Go语言? 开发环境准备 从零开始搭建Go语言开发环境 VS Code配置Go语言开发环境 Go语言基础 Go语言基础之变量和常量 Go语言基础之基本数据类型 Go语言基 ...
- CCF_201612-1_最大波动
http://115.28.138.223/view.page?gpid=T47 水. #include<iostream> #include<cstring> #includ ...
- 概念验证:在Kubernetes中部署ABAP
对于将SAP ABAP应用服务器组件容器化和在Kubernetes中部署它们,我们在SPA LinuxLab中做了概念验证(PoC),本文将介绍一些我们的发现和经验.本文会也会指出这项工作的一些潜在的 ...
- JVM垃圾回收机制和常用算法
由于疫情的原因,所以目前一直在家远程办公,所以很多时间在刷面试题,发现2019大厂的面试虽然种类很多,但是总结了一下发现主要是这几点:算法和数据结构. JVM.集合.多线程.数据库这几点在面试的时候比 ...
- 详解c++中对二维数组下标[][]的重载
首先定义一个矩阵类,我用一个二维数组存储矩阵中的数据,矩阵详细定义如下 class Matrix { public: Matrix(int rows, int cols) { _rows = rows ...