天道酬勤,学无止境

vue-cli使用

使用npm命令需要先安装node.js,详细可去菜鸟教程https://www.runoob.com/nodejs/nodejs-install-setup.html

Vue-cli 是 vue 官方提供的用于搭建基于 vue+webpack+es6 项目的脚手架工具

下载vue-cli,在nodejs全局安装路径下

npm install -g vue-cli

G:\resourcesWY\vue-cli>vue init webpack vueDemo#初始化、打包、命名

? Project name vue_demo#项目名字不能有大写
? Project description A Vue.js project
? Author littleyy <156922****@qq.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no

   vue-cli · Generated "vueDemo".

# Project initialization finished!
# ========================

To get started:

  cd vueDemo
  npm install (or if using yarn: yarn)
  npm run lint -- --fix (or for yarn: yarn run lint --fix)
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

G:\resourcesWY\vue-cli>cd vueDemo

G:\resourcesWY\vue-cli\vueDemo>npm install#安装
npm WARN deprecated babel-eslint@8.2.6: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated eslint-loader@1.9.0: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated html-webpack-plugin@2.30.1: out of support
npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated uglify-es@3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated core-js@2.6.12: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated

> core-js@2.6.12 postinstall G:\resourcesWY\vue-cli\vueDemo\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> ejs@2.7.4 postinstall G:\resourcesWY\vue-cli\vueDemo\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)


> uglifyjs-webpack-plugin@0.4.6 postinstall G:\resourcesWY\vue-cli\vueDemo\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.1 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\watchpack-chokidar2\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1379 packages from 715 contributors and audited 1386 packages in 190.98s

48 packages are looking for funding
  run `npm fund` for details

found 19 vulnerabilities (3 low, 10 moderate, 6 high)
  run `npm audit fix` to fix them, or `npm audit` for details

运行
npm run dev
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
App.vue 引入组件标签的步骤

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!--3步 使用组件标签-->
    <HelloWorld/>
  </div>
</template>

<script>
  //第1步  引入组件
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  //第2步 映射组件标签
  components: {
    HelloWorld
  }
}
</script>
<!--添加样式-->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
/*入口JS:创建vue实例*/
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },/*将APP映射成组件标签*/
  template: '<App/>'
})

eslint忽略检
在这里插入图片描述或者
在这里插入图片描述

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 使用vue-cli(vue脚手架)快速搭建项目
    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。这篇文章将会从实操的角度,介绍整个搭建的过程。 1. 避坑前言 其实这次使用vue-cli的过程并不顺利,反复尝试几次都遇到以下这个报错: 在网上查了很多资料才发现原来是node版本过低的问题,虽然没有找到官方对这个“过低”问题的解释,但是根据国外网友的经验之谈,应该是至少使用node6,我将node4更新至node8之后确实没有报错了,顺利搭建。相关答疑帖:https://github.com/vuejs/vue-cli/issues/618 将这个放在最前面说是希望大家在搭建前,应该先确保将node更新至6以上,这样能少走一些弯路。下面开始正式介绍整个构建过程。 2. 使用 vue-cli 搭建项目 下面整个过程是基于已经安装node.js和cnpm的基础上,node.js如何安装就不在这里详说了。如何全局化安装cnpm,这里简单提一下: npm install cnpm -g --registry=https://registry.npm.taobao.org 其实对于安装vue-cli,使用npm命令和cnpm命令都是可以的,个人觉得使用npm安装的比较慢,而且很可能会因为网络问题而出错,所以还是觉得使用cnpm稳一点。 (1)全局安装 vue-cli
  • 是否可以在没有 vue-cli 的情况下构建 vue 应用程序?(Is it possible to build a vue application without vue-cli?)
    问题 就像标题本身所说的那样。 是否可以在 webpack 的帮助下构建 vue 应用程序而无需 vue cli? 如果不是,为什么? 据我了解 vue-cli 也使用 webpack 来构建他们的文件。 回答1 是的当然。 vue-cli底层使用 webpack,但它使用合理的默认值抽象掉了所有繁琐的 webpack 配置,因此您可以专注于编写应用程序。 如果你需要改变你的应用程序的构建方式,例如你想压缩图像资产,那么除非vue-cli为你的特定需求提供了一个配置选项,那么你将不得不以某种方式改变 webpack 配置(例如添加一个新加载程序或更改现有加载程序的配置等)。 vue-cli确实公开了一些方法来做到这一点,但你不能从一开始就完全控制 webpack 构建。 我通常对如何构建我的 Web 应用程序有非常具体的要求,所以我选择了 DIY webpack 解决方案,以便我可以完全控制构建的所有方面。 如果您不想使用vue-cli但仍想使用 webpack,那么至少我会建议以下软件包: webpack vue vue-loader用于编译和捆绑.vue单文件组件用于转译 JavaScript 的babel-loader 图像资产的file-loader 用于在运行时将样式注入 DOM 的样式style-loader css-loader用于加载 CSS 文件中引用的模块
  • linux系统下从vue-cli2升级到vue-cli3
    备忘一下linux下将vue-cli2升级vue-cli3的的过程 1.查看vue-cli的版本命令 vue -V 2.卸载vue-cli2 npm uninstall vue-cli -g 3.安装vue-cli3 npm install -g @vue/cli 我在linux系统下安装失败,报错没有权限。需要使用以下命令切换到root。 su root 进入后还是安装失败,报下面的错误 Unsupported engine for xxxxx@x.x.x: wanted: {"node":">=10"} (current: {"node":"8.17.0","npm":"6.13.4"}) 查看了一下我的node版本,在root下的版本还是8.17.0的,根据提示需要升级node版本至10以上。 注:若要使用 Vue CLI 3,需要Node.js v8.9或更高版本(推荐v10以上)。 4.安装node管理工具nvm升级node版本 NVM是什么? nvm (Node Version Manager) 是Nodejs版本管理器,可对不同的node版本快速进行切换。基于node的工具和项目越来越多,但是每个项目使用的node版本可能不一致,就会出现一些奇怪的问题。使用nvm use命令可以很方便的切换node版本。 linux下的安装命令 curl -o- https:/
  • [vue-cli]如何进入vue-cli图形化可视化管理(输入 vue ui 后没有响应的解决方案)
    [vue-cli]如何进入vue-cli图形化可视化管理(输入 vue ui 后没有响应的解决方案) 导读 如何进入Vue脚手架(vue-cli)图形化管理界面?输入 vue ui 后没有响应怎么解决?为什么使用 npm 重新安装 vue-cli 后,版本依然没有超过3.0? 1.如何进入 vue-cli 图形化管理界面 在全局安装 vue-cli 版本大于3.0的状态下,在终端中输入vue ui命令即可启动vue脚手架提供的图形化项目管理界面 不知道版本的盆友可以用 vue -V 命令来获取版本信息 2. 输入 vue ui 后终端没有响应怎么解决? 这种状况一般是vue脚手架版本低于3.0.0(上方有查询版本号的方式)如果是版本号问题,请继续往下看。如果不是的话,欢迎贴出来一起讨论。 3. 为什么重新安装 vue-cli 后,版本依然没有超过3.0? npm i -g vue-cli 博主使用以上命令安装后,vue-cli的版本依然是 2.9.6 如果你遇见与博主相同的问题,请输入以下命令来完全卸载vue-cli npm uninstall -g vue-cli 使用以下命令重新安装vue-cli npm install -g @vue/cli 这时的vue-cli版本不再是3.0.0之前的版本了 注 意 :博主的Mac就遇到了报错 -13 的问题,这时候终端需要超级权限
  • 创建VUE项目,vue-cli2.0版本和3.0版本的区别,将vue2.0项目升级为vue3.0项目
    创建VUE项目,vue-cli2.0版本和3.0版本的区别,将vue2.0项目升级为vue3.0项目 使用vue-cli2.0版本创建vue项目创建前的准备开始创建创建过程项目正常创建 使用vue-cli3.0版本创建vue项目安装vue-cli脚手架失败将vue2.0版本升级为vue3.0版本Vue2和Vue3使用层面上的区别总结Vue 3 的 Template 支持多个根标签,Vue 2 不支持Vue 3 有 createApp(),而 Vue 2 的是 new Vue()v-model代替以前的v-model和.synccontext.emitslot具名插槽的使用Teleport传送门组件 使用vue-cli2.0版本创建vue项目 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 创建前的准备 首先使用命令行模式查看当前环境 // 查看node当前版本 node -v // 查看npm当前版本 npm -v node和npm已经装好了后 使用命令安装vuejs npm install vue -g 选安装vue-cli2.0 npm install vue-cli -g 卸载vue-cli2.0 npm uninstall vue-cli -g /
  • 13. Vue CLI脚手架
    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性。 CLI的全拼是Command-Line Interface, 命令行界面, 俗称脚手架 它是一个专门为单页面应用快速搭建繁杂的脚手架,可以轻松的创建新的应用程序,而且可用于自动生成vue和webpack的项目模板。 如果开发大型项目, 我们必然需要使用Vue CLI Vue CLI为我们提供了清晰的代码目录结构, 项目结构、部署, 热加载,单元测试等功能。可以提高开发者的工作效率。 2. Vue CLI依赖的环境 依赖NodeJS和NPM: 安装nodeJS, 默认会安装NPM, NodeJs的版本通常要在8.9以上。 NPM的全称是: Node Package manager 。node包的管理和分发工具 国内npm有时很慢, 可以安装cpnm镜像, 这是一个淘宝npm镜像。 使用淘宝定制的cnpm命令行工具替代默认的npm工具 npm install -g cnpm --registry=https://registry.npm
  • 13. Vue CLI脚手架
    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性。 CLI的全拼是Command-Line Interface, 命令行界面, 俗称脚手架 它是一个专门为单页面应用快速搭建繁杂的脚手架,可以轻松的创建新的应用程序,而且可用于自动生成vue和webpack的项目模板。 如果开发大型项目, 我们必然需要使用Vue CLI Vue CLI为我们提供了清晰的代码目录结构, 项目结构、部署, 热加载,单元测试等功能。可以提高开发者的工作效率。 2. Vue CLI依赖的环境 依赖NodeJS和NPM: 安装nodeJS, 默认会安装NPM, NodeJs的版本通常要在8.9以上。 NPM的全称是: Node Package manager 。node包的管理和分发工具 国内npm有时很慢, 可以安装cpnm镜像, 这是一个淘宝npm镜像。 使用淘宝定制的cnpm命令行工具替代默认的npm工具 npm install -g cnpm --registry=https://registry.npm
  • cli2弃用了吗 vue_Vue-CLI是什么?Vue-CLI2.x到Vue-CLI3.x有哪些进步?
    前言 如果你用Vue搭建过项目,应该都熟悉vue init webpack projectName命令,至于为什么是这个命令,相信了解的人不是特别多,反正我能用就行了。现在我们就来好好了解一波。 Vue-CLI是什么? Vue-CLI是Vue.js的脚手架,用于自动生成vue.js+webpack的项目模板。运行vue init webpack projectName命令,就必须装Vue-CLI。然后我们来看看官方怎么说: Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 1、通过 @vue/cli 搭建交互式的项目脚手架。 2、通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。 3、一个运行时依赖 (@vue/cli-service),该依赖: (1)可升级; (2)基于 webpack 构建,并带有合理的默认配置; (3)可以通过项目内的配置文件进行配置; (4)可以通过插件进行扩展。 4、一个丰富的官方插件集合,集成了前端生态中最好的工具。 5、一套完全图形化的创建和管理 Vue.js 项目的用户界面。 Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时
  • Vue-CLI3.0更改打包配置
    在实际项目开发中,我们一般会直接使用vue、vue-cli来搭建项目。vue框架的宗旨就是让初学者轻松上手,所以,对于打包配置的一些东西,vue的脚手架已经帮我们做好了完美的封装,让我们达到安装既用的效果,也不用担心太多不会做打包配置的问题。 在前期使用Vue-CLI2.0搭建项目时,我们可以在build目录下,直接修改webpack配置项。 但在Vue-CLI3.0中已经帮我们对webpack配置做了二次封装,在使用3.0版本搭建项目时,我们并不需要去关心原生webpack的配置,只需要查看Vue-CLI3.0官方API即可。 vue-cli3.0中的打包配置 vue-cli3.0的安装 npm install -g @vue/cli 使用vue-cli3.0搭建项目 vue create my-project 项目目录如下 在创建好的项目中,并不存在webpack的配置文件。因为vue框架里,不需要知道如何配置webpack, 只需要在项目根目录下创建一个vue.config.js配置文件,通过vue-cli脚手架中的一些封装好的简单配置来实现即可。 Vue脚手架工具的宗旨是让用户配置起来更简单,所以在Vue-CLI3.0没有把webpack的一些配置项直接暴露给我们,而是在webpack的基础上再次封装了更简单的API,供我们使用。这样即便我们不会用webpack
  • 不同版本vue-cli区别 详解
    目录 vue-cli 命令 项目结构 设置环境变量 (一)vue-cli 命令 1. vue-cli下载安装: vue-cli2: npm install vue-cli -g vue-cli3/cli4: npm install -g vue@cli 2. 创建新项目 vue-cli2: vue init webpack 2.0project vue-cli3/cli4: vue create 3.0project 或通过视图创建项目:vue ui 3. 启动项目 vue-cli2: npm run dev vue-cli3/cli4: npm run serve (二)项目结构 vue-cli3/cli4中移除了配置文件目录:config 和 build 文件夹。 同时移除了 static 静态文件夹,新增了 public 文件夹,将 index.html 移动到 public 中。 1. vue-cli2 |-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node、npm等版本 | |-- utils.js // 构建工具相关 | |-- vue-loader.conf.js // webpack loader配置 | |-- webpack.base
  • 不同版本vue-cli区别
    目录 (一)vue-cli 命令 (二)项目结构 (三)设置环境变量 (一)vue-cli 命令 1. vue-cli下载安装: vue-cli2: npm install vue-cli -g vue-cli3/cli4: npm install -g vue@cli 2. 创建新项目 vue-cli2: vue init webpack 2.0project vue-cli3/cli4: vue create 3.0project 或通过视图创建项目:vue ui 3. 启动项目 vue-cli2: npm run dev vue-cli3/cli4: npm run serve (二)项目结构 vue-cli3/cli4中移除了配置文件目录:config 和 build 文件夹。 同时移除了 static 静态文件夹,新增了 public 文件夹,将 index.html 移动到 public 中。 1. vue-cli2 |-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node、npm等版本 | |-- utils.js // 构建工具相关 | |-- vue-loader.conf.js // webpack loader配置 | |--
  • 【Vue】vue-cli 初始化项目的项目结构
    目录 1. vue-cli 简介2. vue-cli 安装3. vue-cli初始化项目4. 项目结构 1. vue-cli 简介 vue-cli是Vue 提供的一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。 使用vue-cli有以下几大优势: vue-cli是一套成熟的Vue项目架构设计,会跟着Vue版本的更迭而更新vue-cli提供了一套本地的热加载的测试服务器vue-cli集成了一套打包上线的方案,可使用webpack或Browserify等构建工具 2. vue-cli 安装 // 必须全局安装vue-cli,否则无法使用vue命令 // 安装完成之后使用vue -V检查vue-cli是否安装成功及版本信息 npm install -g vue-cli vue -V 3. vue-cli初始化项目 使用以下命令来初始化一个项目: vue init webpack vue-demo 初始化项目,并按步骤选择需要的配置: 4. 项目结构 【main.js】 项目的入口文件,上面使用import来导入相关组件依赖,因为已经使用webpack配置过了,所以加载的文件可以不写后缀名。 其中new Vue部分的内容不会进行代码检查。
  • (精华)2020年7月12日 vue vue-cli脚手架的使用
    vue-cli脚手架 https://cli.vuejs.org/zh/guide/installation.html 1. 简介 版本:2.x vue-cli是一个vue脚手架,可以快速构造项目结构 vue-cli本身集成了多种项目模板: simple 很少简单 webpack 包含ESLint代码规范检查和unit单元测试等 webpack-simple 没有代码规范检查和单元测试 browserify 使用的也比较多 browserify-simple 2. 示例,步骤: 2.1 安装@vue/cli (vue-cli),配置vue命令环境 version ---- 2.9.6版本 npm install vue-cli -g 或者 yarn global add vue-cli vue --version vue list version ---- @vue/cli 4.1.2 npm install -g @vue/cli # OR yarn global add @vue/cli ,或者指定版本安装 yarn global add @vue/cli@3 可以安装一个桥接工具拉取 2.x 模板 (旧版本) npm install -g @vue/cli-init `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同 vue init webpack
  • vue-cli2和vue-cli3同时存在
    https://blog.csdn.net/Jioho_chen/article/details/90455778 win下 vue-cli2 和 vue-cli3 并存,一起使用开局一张图,内容慢慢编 文章目录win下 vue-cli2 和 vue-cli3 并存,一起使用安装vue-cli版本检验安装是否成功修改vue2和vue3的名称配置环境变量打开环境变量所在位置新建系统变量最后修改Path变量最后。重启电脑就行了写在最后vue2和vue3命令,分别代表了vue-cli2 和 vue-cli3的运行环境,是可以同时在一台电脑并存,使用,而且最重要的是,不用安装在C盘! 如果你已经安装了一个vue的版本,那可以使用本文的方法,在追加一个版本 骚操作开始: 既然要安装2个vue版本,那肯定要想下载对应的2个版本先,我的电脑是没安装过vue的环境的,所以这里我就在F盘随便找个地方,安装vue2和vue3 安装vue-cli版本安装vue-cli3的最新版本注意不要加 -g 加了就是全局安装了vue-cli3我是安装在了vue3文件夹下的执行: npm install @vue/cli1 安装vue-cli2.9.6版本安装2也是同理,我分开了文件夹,在vue2下面 执行: npm install vue-cli@2.9.61当然你们也可以指定自己想要的版本
  • Vue-CLI脚手架详解
    什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLIn 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。 如果每个项目都要手动完成这些工作,那无以效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情。 CLI是什么意思? CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架. Vue CLI是一个官方发布 vue.js 项目脚手架 使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置. Vue CLI使用前提 Node 安装NodeJS 可以直接在官方网站中下载安装.网址: http://nodejs.cn/download/ 检测安装的版本 默认情况下安装Node和自动安装NPM Node环境要求8.9以上或者更高版本。node -v和npm -v查看版本 什么是NPM呢? NPM的全称是Node Package Manager 是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。 后续我们会经常使用NPM来安装一些开发过程中依赖包. Webpack Vue.js官方脚手架工具就使用了webpack模板
  • vue-cli3 与 vue-cli2使用 Tinymce富文本编辑器的异同
    前提 先安装依赖包 npm install tinymce @tinymce/tinymce-vue -S 安装之后,在 node_modules 中找到 tinymce/skins 目录,然后将 skins 目录拷贝到 static 目录下 注意: 如果是使用 vue-cli 3.x 构建的 typescript 项目,就放到 public 目录下,文中所有 static 目录相关都这样处理 tinymce 默认是英文界面,所以还需要下载一个中文语言包 然后将这个语言包放到 static 目录下,为了结构清晰,我包了一层 tinymce 目录 这个是vue-cli2项目的的放法 这个是vue-cli3项目的的放法 引用-代码 <template> <div class="editor"> <editor id="tinymce" v-model="html" :init="editorInit"></editor> </div> </template> <script> import tinymce from "tinymce/tinymce"; import Editor from "@tinymce/tinymce-vue"; import "tinymce/themes/silver"; import "tinymce/plugins/image"; import
  • npm 全局安装vuecli报错_Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目
    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue/cli 3.x 已经发布,如果使用 3.x 构建项目,请参考《Vue 爬坑之路(十二)—— vue-cli 3.x 搭建项目》 一、 安装 node.js 首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包。 安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功。 二、安装 vue-cli 安装好了 node,我们可以直接全局安装 vue-cli: npm install -g vue-cli 但是这种安装方式比较慢,推荐使用国内镜像来安装,所以我们先设置 cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org 如果安装失败,可以使用 npm cache clean 清理缓存,然后再重新安装。后面的安装过程中,如有安装失败的情况,也需要先清理缓存 同样可以使用 cnpm -v 查看是否安装成功 然后使用 cnpm 安装 vue-cli 和 webpack cnpm install -g vue-cli 最新的 vue
  • Vue-cli 版本 3 BETA webpack 配置(Vue-cli version 3 BETA webpack configuration)
    问题 我正在尝试学习和测试即将发布的 vuejs/vue-cli (beta 3.0) 版本,这将是朝着最简单的 webpack 配置迈出的一大步。 同时,例子很少...... 作为测试,我尝试从 vue-cli v2 webpack.dev.conf.js plugins: [ ... // copy custom static assets new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../static'), to: config.dev.assetsSubDirectory, ignore: ['.*'] } ]) ] 到新的 vue-cli 版本 3(测试版) vue.config.js const path = require('path') module.exports = { chainWebpack: config => { config .plugin('copy') .use(require('copy-webpack-plugin')), [{ from: path.resolve(__dirname, '../static'), to: 'static', ignore: ['.*'] }] } } 跑步 npm run serve 不抱怨... 所以它似乎没问题
  • Vue-cli3入门
    简介   Vue-cli 是一个基于 Vue.js 进行快速开发的完整系统,可以用来为开发单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。   Vue-cli 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。   Vue-cli项目地址:https://github.com/vuejs/vue-cli   Vue-cli帮助文档:https://cli.vuejs.org/zh/guide/ 安装   使用之前,你需要先安装 vue-cli 模块。 npm install -g @vue/cli # OR yarn global add @vue/cli   安装完成之后执行下面的命令来检查安装的版本是否正确 (3.x): vue --version   如果已经安装 Vue-cli 2.x版本,可以使用如下命令进行卸载: npm uninstall -g vue-cli 创建项目   Vue-cli 脚手架工具能够帮我们编写好项目基础代码
  • vue-cli3.x、vue-cli4.x中,想要在node中使用es6的语法,该如何配置babel
    新版vue-cli工具生成的项目,如何配置babel,使之可以在node中使用es6+的语法 导读(写在前面)方案一方案二 本文行文条件是基于 vue-cli3 构建的项目,在 vue-cli4 中依然可用; 同时,在其他类型的项目中,如果是此类问题,依然可以适用。 导读(写在前面) 使用新版的 vue-cli 工具生成的项目,在项目结构上,以及配置文件上都与之前有了很大的不同,而且新版的 vue-cli 给你做了很多默认的配置,可能会给你带来一些困扰,让你有点找不到方向。(因为现在你甚至都不知道配置文件在哪;啊哈哈哈~~你说难不难受) 点评:我觉得挺好的,新版的这个脚手架工具挺好的,新建一个项目变得简单了,而且可以保存自己的配置和偏好,后续新建项目就变得很轻松了,有利于团队规范。 代码结构变得比以前清爽了,感觉更高级。 ok,话不多说,我们回到文章主题: 我们现在要在项目的 server 层(也就是node)中使用一些 es6 的语法 方案一 1、安装相关的 babel 依赖 npm i @babel/register @babel/preset-env -D 2、使用 在你的 node 代码中,要使用 es6 语法之前,加上以下代码: require('@babel/register')({ presets: ['@babel/preset-env'] }) 3、重启项目(