用vue-cli搭建项目踩过的坑

1. 需要额外安装sass-loader:

我以为vue-cli会安装所有与css相关的loader,然并非,为这个死了很多脑细胞。

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

2. 修改style标签:

打开src目录下的components目录中的App.vue文件。然后修改 style标签如下:

<style lang="sass" rel="stylesheet/sass">

  

3. sass 和 scss 的区别:

Module build failed:
body, html {
^
Invalid CSS after "body, html {": expected "}", was "{"
in E:\workspace\my-project\src\common\scss\base.sass (line 1, column 13)

@ ./~/[email protected]!./~/[email protected]?{"minimize":false,"sourceMap":false}!./~/[email protected]/lib/style-compiler?{"vue":true,"id":"data-v-1c89a140","scoped":false,"hasInlineConfig":false}!./~/[email protected]/lib/loader.js?{"sourceMap":false}!./~/[email protected]/lib/selector.js?type=styles&index=0!./src/components/index/index.vue 4:14-437 13:3-17:5 14:22-445
@ ./src/components/index/index.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

错误提示:无效的css。因为sass语法不使用大括号和分号。
如果你喜欢使用不带大括号的语法,只要去掉css代码的大括号和分号,即使用缩进语法。
如果你希望使用带大括号的语法,即SCSS
那么,你需要把

<style lang="sass" rel="stylesheet/sass"> 改成 <style lang="scss" rel="stylesheet/scss">

并且如果有引入的scss文件,后缀名也要用.scss,(既然选择用.scss,肯定整个项目中所有单独的命名文件都用.scss了),如下:

@import "../../common/scss/index.scss";

4. 如果有公共的.scss文件,需要再index.scss中引入的话,不可引入控的.scss文件。我踩的这个坑真的把我折磨的够呛,如下:

@import "./base";
// @import "./public";    如果public.scss为空的话,不可引入,否则报错,根据错误提示也很难找出原因
// @import "./third-library";

附带报错提示:

This dependency was not found:

* -!../../../node_modules/[email protected]/index.js?{"minimize":false,"sourceMap":false}!./mint-ui/lib/style.css in ./~/[email protected]?{"minimize":false,"sourceMap":false}!./~/[email protected]/lib/style-compiler?{"vue":true,"id":"data-v-1c89a140","scoped":false,"hasInlineConfig":false}!./~/[email protected]/lib/loader.js?{"sourceMap":false}!./~/[email protected]/lib/selector.js?type=styles&index=0!./src/components/index/index.vue

To install it, you can run: npm install --save -!../../../node_modules/[email protected]/index.js?{"minimize":false,"sourceMap":false}!./mint-ui/lib/style.css

5. 如果改了项目文件夹的名字,需要删除node-modules重新npm i,否则会产生依赖找不到的问题。

  

  

时间: 2024-10-07 06:47:29

用vue-cli搭建项目踩过的坑的相关文章

使用vue cli开发项目中遇到的坑

一.部署文件 使用vue cli 开发项目,执行npm run build命令生成dist静态文件,将dist文件包放到服务器中即可. 刚接触webpack,不知道怎么部署前端文件,原以为需要将app文件上传,在 inux上安装node,以及npm install 一系列的包,捣鼓了很久,发现只需要执行 npm run build 将源码打包成一个静态文        文件即可,上传静态文件dist,将 controller指向index.html. 二.跨域问题 实行前后端分离,使用vue i

vue cli搭建项目及文件引入

cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载东西有时会快一些 2.cnpm i -g vue-cli  //安装 vue-cli,i:install 安装,-g:全局,哪儿都可以使用. 3.vue init webpack-simple ProjectName //webpack-simple:使用webpack-simple模板,proje

Vue Cli搭建域名服务器常见问题

Vue Cli搭建域名服务器常见问题 Vue Cli不使用反向代理配置域名 通过npm run serve命令执行Vue项目只能通过IP地址来访问,即使域名服务中设置DNS依然访问不到.有以下三种解决办法: 1.修改项目根目录下[email protected]\cli-service\lib\options.js文件 //第133行 devServer: { /* open: process.platform === 'darwin', host: '0.0.0.0',//改为域名 port:

使用@vue/cli初始化项目

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli. 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 卸载它.附上vue-cli官方文档地址 首先检查你的node版本,Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+),命令为 node --version 1.安装vue-cli,-g表示全局安装,这样你才可以直接在命令行使用该指令,否则不行 npm insta

VUE学习笔记之vue cli 构建项目

一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号,则说明安装成功 因为在官网下载安装node.js后,就已经自带npm(包管理工具)了,要意的是npm的版本最好是3.x.x以上,以免对后续产生影响. 2.安装淘宝镜像 npm install -g cnpm --registry= https://regis

vue+ts搭建项目

Tip: 为了避免浪费您的时间,本文符合满足以下条件的同学借鉴参考 1.本文模版不适用于小型项目,两三个页面的也没必要用vue2.对typescript.vue全家桶能够掌握和运用 此次项目模版主要涉及的技术框架: vue2.5 vuex3.0 vue-router3.0 axios typescript3.2 Tip: 由于vue-cli3.0帮我们简化了webpack的配置,我们只需要在根目录下的vue.config.js文件的chainWebpack进行配置即可. 接下来进入正题(前提是你

利用脚手架vue cli搭建vue项目

vue.js https://vuejs.org/ 基础: http://cn.vuejs.org/v2/guide/installation.html 1.安装需要利用npm包管理器,所以首先安装node.js https://nodejs.org/en/download/ 安装好后,打开cmd面板,输入 node -v  (v即 version ,查看node版本) npm是随nodeJs一起安装.所以输入 npm -v 说明npm也已经好了. (安装nodejs后,里面的npm可能不是最新

vue cli搭建的vue项目 不小心开了eslint 一直报黄色的警告

报错必须处理,警告也忍不了,发现在bulid -webpack.base.config.js 里找到 const createLintingRule = () => ({ /*test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter

vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。

废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子 项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.env.js 我们需要做配置的就是第一个和第三个. 其实这两个文件内容就是针对生产环境和发布环境设置不同的参数的文件,那么打开dev.en.js,开发环境.原本代码如下: 'use strict' const merge = require('webpack-merge') const prodEnv