在vue-cli中构建的项目是可以使用less的,但是查看package.json可以发现,并没有less相关的插件,所以我们需要自行安装。第一步:安装npm install less less-loader --save-dev即通过npm安装less和less-loader,并记录到devDependencies中,因为这是我们在开发中使用的而非在生产中使用,所以就不将之记录在 dependencies 中。 第二步:在配置文件中配置 实际上如果我们通过vue-cli来构建项目,这一步是可以省略的。 在webpack.d...
从三个插件开始1、CommonsChunkPlugincommonsChunkPlugin 是webpack中的代码提取插件,可以分析代码中的引用关系然后根据所需的配置进行代码的提取到指定的文件中,常用的用法可以归为四类:(1)、提取node_modules中的模块到一个文件中;(2)、提取 webpack 的runtime代码到指定文件中;(3)、提取入口文件所引用的公共模块到指定文件中;(4)、提取异步加载文件中的公共模块到指定文件中。下面就具体说明以上四种用法。1.1 提...
vue create vuedemo
你会被提示选取一个preset。你可以选默认的包含了基本的Babel+ESLint设置的preset,也可以选手动选择特性来选取需要的特性。Babel : 将ES6编译成ES5
TypeScript: javascript类型的超集
Progressive Web App (PWA) Support: 支持渐进式的网页应用程序
Router:vue-router
Vuex: 状态管理
CSS Pre-processors: CSS预处理
Linter / Formatter: 开发规范
Unit Testing: 单元测试
E2E Testing: 端到端测试ESLint + St...
之前打包还没问题,这次就报错了,后来发现原来是少了 .babelrc 文件, 网上找了好多方法都不行,后来看了之前的项目,原来是少了 .babelrc 文件, 只要在根目录下建立这个文件, 文件内容如下:{"presets": [["env", { "modules": false }],"stage-3"]
}文件位置看下图: 原文:https://www.cnblogs.com/yalong/p/10694088.html
一、总体框架一个vue-cli的项目结构如下,其中src文件夹是需要掌握的,所以本文也重点讲解其中的文件,至于其他相关文件,了解一下即可。 vue-cli项目总体结构二、文件结构细分1.build——[webpack配置]build文件主要是webpack的配置,主要启动文件是dev-server.js,当我们输入npm run dev首先启动的就是dev-server.js,它会去检查node及npm版本,加载配置文件,启动服务。build文件结构2.config——[vue项目配置]config文件主要是...
搭建vue-cli 脚手架构建工具步骤:首先:1、安装nodejs2.安装淘宝镜像 (npm install -g cnpm --registry= https://registry.npm.taobao.org)3、cnpm -v 若出现相应的版本号则说明镜像安装成功4、安装webpack(npm install webpack -g)5、webpack -v 检查是否安装成功6、安装vue-cli脚手架构建工具(npm install vue-cli -g)7、 vue -V(注意是大写的V若出现相应的版本号则说明安装成功)8、创建项目* vue init webpack projectName...
1、为什么用nodejs
因为它是javascript运行环境,不同系统直接运行各种编程语言
是我即将使用vue的推荐开发环境。
选择对应版本,https://nodejs.org/en/download/
下一步下一步就好
2、为什么安装npm
它是Nodejs下的包管理器。安装好nodejs就可以使用npm
检查是否成功
安装好之后,对npm安装的全局模块所在路径以及缓存所在路径,进行环境配置。是因为以后在执行类似:npm install express [-g](后面的可选参数-g,g代表global全...
一、文件目录说明main.js:应用的入口文件App.vue:根组件,整个组件的入口
加载文件不要后缀名:
resolve:{extensions:[‘.js‘,‘.vue‘,‘.json‘],alias:{‘vue$‘:‘vue/dist/vue.esm.js‘,‘@‘:resolve(‘src‘) //@就代表了"src"这个目录}
}
import App from ‘./App‘; 就相当于 ‘./App.vue‘;
import router from ‘./router‘ //加载某个目录下的index.js文件,可以简写,就相当于 ‘./router/index.js‘.gitignore...
<template><div class="stars"><div v-for="(item,ind) in num" :key="ind" :class="{‘on‘:ind<=cur}" @mouseover=‘enter(ind)‘@mouseleave="out()"@click="ok(ind)"></div></div>
</template>
<script>export default{name:‘Star‘,data(){return{num:5,cur:-1,flag:false}},methods:{enter(ind){if(!this.flag){this.cur=ind;}},out(){if(!this.flag){this.cur=-1;}},ok(ind){this.flag=true;this.cur=ind; }}}
</script>
<...
1、查看node 版本node -v 2、安装vue-cli,如果安装不了,需要安装淘宝镜像npm install --global vue-cli 3、选择开发目录,初始化项目vue init webpack 项目名称 4、运行即可 原文:https://www.cnblogs.com/shuajing/p/14011426.html
好久没有写笔记了,看着以前写的笔记有很多不合理的地方也没有去改正,这里抽空记录一个vue-cli莫名其妙的警告,虽然现在我也是一脸懵逼,但是还好把问题处理了.出现的的问题是:项目运行时出现警告This relative module was not found:* ./Home/HomePage/HomePage.less in ./src/components lazy ^\.\/.*$,但是less是起作用了的.这个问题百度也没有百度出来,折腾了半天,只好自己想办法,还好在群里热心大佬们耐心的帮我找问题,给了我很多...
有了eslint的校验,可以来规范开发人员的代码,是挺好的。但是有些像缩进、空格、空白行之类的规范,在开发过程中一直报错,有点烦人了。我们可以在创建工程的时候选择不要安装eslint。就是在安装工程的时候,出现【Use ESLint to lint your code?】时选择【No】即可。如果你已经安装过了,我们可以直接关闭它。关闭eslint的方法:1.项目根目录 ---> build ---> webpack.base.conf.js 注释掉如下的代码 2.重启编辑器,再运行npm ru...
1、大文件定位 我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小,然后有目的的解决过大的js文件。 安装:npm install --save-dev webpack-bundle-analyzer 在webpack中设置如下,然后npm run dev 的时候默认会在8888端口显示const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin;module.exports = {plugins: [new BundleAnalyzerPlugin()]
}2、使用cdn ...
vue-cli项目打包:1. 命令行输入:npm run build 打包出来后项目中就会多了一个文件夹dist,这就是我们打包过后的项目。第一个问题,文件引用路径。我们直接运行打包后的文件夹中的index.html文件,会看到网页一片空白,f12调试,全是css,js路径引用错误的问题。解决:到config文件夹中打开index.js文件。文件里面有两个assetsPublicPath属性,更改第一个,也就是更改build里面的assetsPublicPath属性:assetsPublicPath属性...
vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node1、安装node,vue运行需要基于npm一定的版本,所以首先升级npm到最新的版本,而在安装的过程中个人比较喜欢淘宝的镜像,所以先安装cnpm(因为速度和稳定性都比较好)2、在目标文件夹下打开终端3、执行cnpm install vue-cli -g 全局安装 运行vue查看安装是否成功 4、运行vue init webpack(注:模板名称) sell2(注:项目名称) 5、进入项目文件夹下执行 cnpm i...