vue-cli | 易学教程

npm 、webpack 、 vue-cli

阅读更多关于 npm 、webpack 、 vue-cli

什么是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 webpack --D

不使用 vue-cli 去搭建一个 vue + webpack 的准备项目（配置详解）（三）webpack配置devServer，详细说明原理。

阅读更多关于不使用 vue-cli 去搭建一个 vue + webpack 的准备项目（配置详解）（三）webpack配置devServer，详细说明原理。

四、配置webpack-dev-server （1）理解为什么要使用 webpack-dev-server 在上面一篇文章中，我们已经可以通过webpack去打包整个项目了，但是每次写完代码，都需要手动运行一下webpack执行打包，才能看到修改后的效果，这对于我们前端开发来说是十分不方便的。还有一点就是如果我们想发送一个ajax请求，那么必须要使用http协议，而直接打开本地文件使用的则是file协议。因此，我们可以使用webpack自带的devServer来在前端开启一个小型服务器，这个服务器可以监听我们的文件改动然后自动刷新页面，可以帮助我们实现ajax请求的发送。我们在第一篇文章的开头就已经安装好了 webpack-dev-server 因此我们可以直接进入webpack.config.js去开启他！（2）配置webpack-dev-server 在module.exports中增加如下配置： devServer: { open: true, // 开启服务器后是否自动打开浏览器 port: 9090, // 服务器所占端口 contentBase: path.resolve(__dirname, 'dist'), // 服务器打开本地文件的地址 hot: true, historyApiFallback: true,//找不到页面默认跳index.html },

vue-cli之vuex

阅读更多关于 vue-cli之vuex

使用vue的脚手架是方便的，因为它省去自己搭架子的过程，只要直接在它的基础上改动一下就可以方便开发了，而且使用 es6的开发方式是很有便利的。 1、es6的前端开发都基于node的工具，如webpack，gulp等 2、es6的开发一般可以让代码不那么混乱，如现在的后台一样可以有引包的概念。 3、vue的开发可以让代码有组件的感觉，这样代码可以更加规范，规范的代码才是维护的王道。 4、前端可以向后台开发一样借助工具提高开发效率，如浏览器的兼容等。而组件之间的复杂交流是很难直接就一个vue就可以解决的，因为vue跨组件通讯是很麻烦的，而且会让代码的解耦低，不符合vue的组件概念，而一般经常跨组件通讯可以直接使用gobal的全局变量方式解决，但复杂点的就要使用vuex，它也是类全局变量的意思，只是它是vue的全局变量，因为它是集中管理机制。 vuex开始： 1、npm 安装 npm install vuex --save 2、让vuex单独出来好处理，如创建一个文件夹store,结构如下: 因为vuex的核心一般是state\getters\mutations\actions，所以单独处理，其他看情况，如mutation-type，因为有可能 actions里都可以使用mutations的方法，所以以常量命名统一管理。 index是定义vuex的使用的。如: import

vue-cli -- Tinymce富文本编辑器挖坑

阅读更多关于 vue-cli -- Tinymce富文本编辑器挖坑

官方文档参考文献一、安装Tinymce // 首先安装tinymce的vue组件，因为没有注册服务 npm install @tinymce/tinymce-vue -S // 接着安装tinymce npm install tinymce -S 或者在package.json文件中配置 "@tinymce/tinymce-vue": "^2.0.0", "tinymce": "^5.0.3", 二、安装语言包正常情况下，tinymce是英文的，所以需要下载中文包中文语言包下载三、配置文件将下好的中文包和tinymce中的skins文件一起拷贝复制到public中的tinymce中四、引入tinymce 在使用页面引入tinymce import tinymce from 'tinymce/tinymce' import Editor from '@tinymce/tinymce-vue' import 'tinymce/themes/silver' Tips 这是个组件，需要在components中注册后才能使用 <editor id="tinymce" v-model="tinyValue" :init="init"></editor> init 初始化配置 init: { language_url: '/tinymce/langs/zh_CN.js',//

使用webstorm搭建vue-cli项目

阅读更多关于使用webstorm搭建vue-cli项目

前言在上一章博客的内容中 vue学习笔记(七)组件我们初步的认识了组件，并学会了如何定义局部组件和全局组件，上一篇内容仅仅只是对组件一个简单的入门，并没有深入的了解组件当中的其它机制，本篇博客将会带大家深入了解组件的其它知识，组件的校验，组件的通信等等。本章目标学会组件简单的校验学会父组件向子组件传递数据学会子组件向父组件传递数据父组件向子组件传递数据父组件向子组件传递数据实现的方式特别简单，只用使用props进行数据传递就可以了。语法：props['属性1'，‘属性2’，...] 我找了一张图给大家参考一下在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息 (1)简单的父组件向子组件传递信息 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>父组件向子组件传递信息</title> </head> <body> <div id="app"> <my-content :title='title' :content='content'></my-content> </div> <script src="../js/vue.js" type="text

Running into “couldn't infer parser” error using vue-cli

阅读更多关于 Running into “couldn't infer parser” error using vue-cli

问题 I'm getting an error repeatedly when trying to build a new webpack project using vue-cli . I'm following along with the docs on the latest build (3.0.0-beta.11), also tried with an earlier version, which wasn't beta. When I run yarn serve it attempts to start the dev server and build the project but fails here: error in ./src/App.vue?vue&type=template&id=7ba5bd90 Module build failed: Error: No parser and no file path given, couldn't infer a parser. at normalize (/Users/cory/Code/chickadee/my

安装nodejs安装npm安装cpnm安装vue-cli脚手架

阅读更多关于安装nodejs安装npm安装cpnm安装vue-cli脚手架

1、为什么用nodejs 因为它是javascript运行环境，不同系统直接运行各种编程语言是我即将使用vue的推荐开发环境。选择对应版本， https://nodejs.org/en/download/ 下一步下一步就好 2、为什么安装npm 它是Nodejs下的包管理器。安装好nodejs就可以使用npm 检查是否成功安装好之后，对npm安装的全局模块所在路径以及缓存所在路径，进行环境配置。是因为以后在执行类似：npm install express [-g]（后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。例如：我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我安装的文件夹【D:\Develop\nodejs】下创建两个文件夹【node_global】及【node_cache】打开cmd输入如下命令 npm config set prefix "D:\Develop\nodejs\node_global" npm config set cache "D:\Develop\nodejs\node_cache" 接下来点击我的电脑，属性，高级系统设置输入NODE_PATH 输入C:\Program Files

使用vue-cli创建项目

阅读更多关于使用vue-cli创建项目

安装node.js（ http://nodejs.cn/download/ ） 32 位安装包下载地址 : http://nodejs.org/dist/v0.10.26/node-v0.10.26-x86.msi 64 位安装包下载地址 : http://nodejs.org/dist/v0.10.26/x64/node-v0.10.26-x64.msi 安装node.js和npm 2、在命令行输入node -v ,npm -v 出现对应版本号，则说明安装成功（window+r快速打开cmd命令窗口，在文件夹打开按住shift键右键）安装cnpm 　　　　 1 npm install -g cnpm 安装webpack 　　　　 1 　cnpm install -g webpack 　　输入webpack -V 出现相应的版本号，则安装成功全局安装vue-cli 　　　　 1 cnpm install -g vue-cli 　　　　　输入vue -v 出现相应的版本号，则安装成功通过vue-cli 来新建一个文件夹，用来放置项目　　 vue init webpack 文件夹名　　　　 1 　cd 文件夹名。进入相应的文件夹的命令窗口以下。根据我的需要安装的东西 ( muse-ui.org )根据里面写的安装步骤使用步骤来安装muse-ui和axios 1

Vue2.0使用vue-cli脚手架搭建

阅读更多关于 Vue2.0使用vue-cli脚手架搭建

一：安装node.js Node.js官网：https://nodejs.org/en/download/ 选择相应的版本即可安装通过node自带的npm包管理工具二、安装依赖安装依赖：npm install 如果国外安装比较慢，可采用国内淘宝镜像安装：npm install -g cnpm --registry= https://registry.npm.taobao.org 安装依赖：cnpm intall 三、安装vue-cli脚手架全局安装vue-cli脚手架 Mac版本安装： sudo npm install -g vue-cli Windows 版本安装： npm install -g vue-cli 构建初始化项目：vue init webpack project（创建webpack自动构建project文件目录）输入命令进入项目： cd project 四、运行项目运行项目： npm run dev或npm start (又或输入 http://localhost:8080) 若有不明白请加群号：复制 695182980 ，也可扫码，希望能帮助到大家。来源： https://www.cnblogs.com/CinderellaStory/p/8901358.html

How to disable ESLint in vue-cli?

阅读更多关于 How to disable ESLint in vue-cli?

问题 How do I go about disabling ESlint in project generated with vue-cli ? preLoaders: [ { test: /\.vue$/, loader: 'eslint', include: projectRoot, exclude: /node_modules/ }, { test: /\.js$/, loader: 'eslint', include: projectRoot, exclude: /node_modules/ } ] If I remove the loader: 'eslint' line it won't compile, same with setting it to an empty string. I know I can opt out of ESLint during the initialization phase, but how can I disable it after my project has been created? 回答1: Vue's starter

订阅 vue-cli