vue-cli | 易学教程

Vue dist path for CSS and JS not found

阅读更多关于 Vue dist path for CSS and JS not found

问题 I am having trouble rendering my VueJS application after build. When I look in the build folder and examine the paths, there is a forward slash at the beginning of my paths to my assets, css and javascript. This makes it so my css, assets and javascript cannot be found. I am wondering how, before I run the build script, I can avoid this issue. Thank you. Here is my code: App.vue <template> <div id="app"> <BaseTimer />  </div> </template> <script> import BaseTimer

Importing self-made library into vue project

阅读更多关于 Importing self-made library into vue project

问题 Intro: I've generated two projects with vue-cli ~4.2.0: parent-app and dummylib Goal: to create DummyButton.vue component in dummylib project and import it in parent-app project. What I've done: Followed this tutorial. In dummylib's package.json I've inserted: "main": "./dist/dummylib.common.js", and build-lib script: "build-lib": "vue-cli-service build --target lib --name dummylib src/main.js", dummylib's main.js: import DummyButton from './components/DummyButton.vue' export default

Vue less loading css “Cannot read property 'denominator' of undefined”

阅读更多关于 Vue less loading css “Cannot read property 'denominator' of undefined”

问题 I have a style.less file that I am loading as follows import "./styles/styles.less"; The file looks like the below, I needed to wrap the styles so they didnt effect the surrounding page and noticed the vue modal dialog css was not being loaded (hence why I moved them out to test at the bottom). This originally was because it couldn't find the bottom 3 imports. .form-builder-app { @import './_variables.less'; @import './_app.less'; @import './_structure.less'; @import './_page.less'; @import '

Vue-cli(二) 项目结构

阅读更多关于 Vue-cli(二) 项目结构

vue-cli脚手架工具就是为我们搭建了开发所需要的环境，为我们省去了很多精力。有必要对这个环境进行熟悉，我们就从项目的结构说起。 Ps：由于版本实时更新和你选择安装的不同，所以你看到的有可能和下边的有所差别，这里列出的是模板为webpack的目录结构。一、build文件夹 ├── build // 项目构建(webpack)相关代码 │ ├── build.js // 生产环境构建代码 │ ├── check-versions.js // 检查node&npm等版本 │ ├── dev-client.js // 热加载相关 │ ├── dev-server.js // 构建本地服务器 │ ├── utils.js // 构建配置公用工具 │ ├── vue-loader.conf.js // vue加载器 │ ├── webpack.base.conf.js // webpack基础环境配置 │ ├── webpack.dev.conf.js // webpack开发环境配置 │ └── webpack.prod.conf.js // webpack生产环境配置二、config文件夹 ├── config// 项目开发环境配置相关代码 │ ├── dev.env.js // 开发环境变量（看词明意） │ ├── index.js //项目一些配置变量 │ └── prod

vue-cli-service 机制

阅读更多关于 vue-cli-service 机制

使用了近一年的vue-cli, 一直都不知道npm run dev 之后发生了些什么？？？随手记录下学习笔记入口从package.json里面可以看到 npm run dev 其实就是 vue-cli-service serve vue-cli3.0 安装的时候把vue-cli-service一并安装了，即执行了 npm install vue-cli-service --save-dev 这样就可以在./node_modules/.bin目录下查看到vue-cli-service @IF EXIST "%~dp0\node.exe" ( "%~dp0\node.exe" "%~dp0\..\@vue\cli-service\bin\vue-cli-service.js" %* ) ELSE ( @SETLOCAL @SET PATHEXT=%PATHEXT:;.JS;=;% node "%~dp0\..\@vue\cli-service\bin\vue-cli-service.js" %* ) 入口：./node_modules/@vue/cli-service/bin/vue-cli-service.js 瞅一眼vue-cli-service.js的核心代码 const Service = require ( '../lib/Service' ) // 实例化Service

初学者使用cnpm安装vue-cli

阅读更多关于初学者使用cnpm安装vue-cli

一. 安装node,官网下载https://nodejs.org/zh-cn/ 安装淘宝镜像 1.在node安装目录下shift+右键打开命令提示窗口，输入: npm install -g cnpm --registry=https://registry.npm.taobao.org 输入之后反应有点儿慢，可以稍等一下。 2.当看到最下面一行字符呢说明cnpm已经安装完成了，接下来安装vue-cli，在命令提示行输入: cnpm install vue-cli -g 安装时间比较慢 3.安装完成的时候它会让你输入项目名称，随便输入什么都可以，建议取有意义的项目名称 4.全部选择之后呢，你的node安装目录下就会多一个刚刚你取的项目名称的文件夹，然后输入cd "文件夹名称"（会有提示），再输入npm run dev 出现：Your application is running here: http://localhost:8080的时候呢说明项目已经可以运行了。二. 在浏览器输入localhost：8080就会看到如下页面来源： https://www.cnblogs.com/li-qiang-blog/p/8516624.html

解读 vue-cli 脚手架（二）：npm run build 的背后

阅读更多关于解读 vue-cli 脚手架（二）：npm run build 的背后

接上一片文章: 解读 vue-cli 脚手架（一）：npm run dev的背后如果没有看过我的上一篇文章，请先移步去看一下哈！时隔一年多，之前写的文章感觉大家还挺喜欢的，一直说要更新下一篇。但是一直没有机会，没时间，还有就是，感觉自己的技术，可能不足以支持我继续往下走。但是经过这个一年多的历练，感觉很多东西考虑的会更周全，不负期待！废话说一堆，步入正题。一、前言这里有必要声明一下，上一篇文章我是 2018-09-19 发布的，也就是说，距离现在(2020-02-03)至少已经过去了一年半的时间，原来的 vue-cli 变成了 vue @cli 脚手架和项目工程已经变得面目全非，和原来差别非常大。那现在的这个文章还值得再去看嘛？我的观点是：主要看你抱着什么姿势来看这个文章吧，如果你是想急忙解决项目中遇到的一些问题。可能这个文章不是很适合你，因为你看了也不会有立竿见影的效果，不会帮助你马上解决你的问题。但是如果你想往更高的一个阶段走，或是满足之前的好奇心，为什么这个脚手架能够打包出项目需要的东西来，这个是怎么跑起来的。那么这个文章你还是很值得看的。因为，虽然 vue @cli 升级了，运用的方式不同了，项目结构变了。但是我要说的是，如果你熟悉底层的话，项目结构，脚手架这些东西感觉只是换汤不换药，最终还是围绕着 webpack 去组织的项目

Vue 搭建项目

阅读更多关于 Vue 搭建项目

Vue 搭建项目一.node下载安装： 1.下载： https://nodejs.org/en/download/ 2.安装默认许选择，下一步就行； 3.安装完之后就可以使用npm命令二.通过@vue/cli方式安装： 1.全局安装@vue/cli ： npm install -g @vue/cli 最新版本3.x，可以通过ui界面方式创建 2.创建项目： vue create 项目名称或 vue ui 直接打开web页面，通过界面方式创建项目三.通过vue-cli方式安装： 1.全局安装vue-cli npm install --global vue-cli vue-cli 旧版本 2.通过webpack方式初始化vue项目 vue init webpack 项目名称 3.根据提示设置项目信息即可四.运行： npm run dev 五.编写代码调试：跳转到：https://www.cnblogs.com/zlp520/p/10924962.html 六.生成： npm run build 七.扩展： 1.npm 安装cnpm： npm install - g cnpm -- registry = https :// registry . npm . taobao . org 安装完之后就可以使用cnpm和npm命令一样，只是cnpm是淘宝镜像而已 2

npm、webpack、vue-cli 快速上手版

阅读更多关于 npm、webpack、vue-cli 快速上手版

Node.js npm 什么是Node.js 以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript，基于Chrome V8 引擎的。 npm 是Node.js 的包管理工具。 npm的安装和更新 Node.js下载安装 Node.js 官网下载安装。npm自带的包管理工具。查看安装版本信息：　　-- node -v 查看Node.js 版本信息　　-- npm -v 查看npm版本信息更新npm到指定版本：　　-- npm install npm@5.3.0 -g 　　-- npm install npm@latest -g 更新最新的稳定版本 npm 常用操作之前我们用JQuery或者Bootstrap用cdn 或者直接手动下载并放入项目，而且要管理版本。有了npm，我们管理自己的依赖包以及版本更加简单。到自己项目目录下，进行以下命令：　　-- npm init -y 输入-y使用默认配置项生成package.json文件。　　-- npm i jquery@0.0.0 简写install 为 i 下载依赖不写@ 默认最新版本　　-- npm uninstall jquery 卸载依赖包　　-- npm update jquery 更新依赖包　　-- npm list 列出已安装的依赖　　-- npm install

npm、webpack、vue-cli 快速上手版

阅读更多关于 npm、webpack、vue-cli 快速上手版

订阅 vue-cli