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...
最近在学习使用vue,简单汇总下如何使用vue-cli脚手架自动化搭建一个vue项:1.首先,要安装node.js,之后第一步检测是否安装node;没有安装node的同学请到官网下载安装 https://nodejs.org/en/download/安装成功后在命令行查看node版本,如果有说明安装成功。 2.之后全局安装vue-cli脚手架电脑进入cmd,任意路径下 使用 npm命令:npm install vue-cli -g注意:npm -v 3.0+ npm版本需要在3.0之上 3.之后在你想要的工程目录下:使用...
{// 此项指明,转码的规则"presets": [// env项是借助插件babel-preset-env,下面这个配置说的是babel对es6,es7,es8进行转码,并且设置amd,commonjs这样的模块化文件,不进行转码["env", {"modules": false,"targets": {"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]}}],// 下面这个是不同阶段出现的es语法,包含不同的转码插件"stage-2"],// 下面这个选项是引用插件来处理代码的转换,transform-runtime用来处理全局函...
做了一个demo,想看一下打包之后的样子,发现页面是空的。发现问题就要解决:1.首先看控制台没有报任何错误,那就证明我们的代码是没有任何问题的。只能是路径问题造成的。2.在路由router/index.js中加入一个404页面,代码引入创建之类的就不说了。也就是说只要路径错误,Error这个vue组件就会显示{path: ‘*‘,name: ‘404‘,component: Error,hidden: true}3.再打包,发现新增的Error果然出现。4.再次证明是路径问题,想到路由有个...
Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/ 一、安装 @vue/cli更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vue/cli如果之前全局安装了旧版本的 vue-cli (1.x 或 2.x),首先需要使用以下命令卸载掉// 如果没有安装旧版本的 vue-cli 可以跳过卸载直接安装npm uninstall vue-cli -g
# OR
yarn global remove vue-cli 然后重新安装新版本的 @vue/clinpm install -g @vue/cli
# OR
yarn global add @vue/cli安装...
Vue是近两年来比较火的一个前端框架(渐进式框架吧)。 Vue两大核心思想:组件化和数据驱动。组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用;数据驱动是前端的未来发展方向,释放了对DOM的操作,让DOM随着数据的变化自然而然的变化(尤神原话),不必过多的关注DOM,只需要将数据组织好即可。本文用Vue-cli从零开始搭建一个Vue项目。准备工作1、下载安装Node.js 下载地址:https://nodejs.org/en/downlo...
参考文章: https://segmentfault.com/q/1010000008832754原文:http://www.cnblogs.com/zhuzhenwei918/p/6943147.html