下载完成后运行安装包，一路下一步就行。然后在 cmd 中输入 node -v，检查是否安装成功。
在这里插入图片描述
如图，出现了版本号（根据下载时候的版本确定），说明已经安装成功了。同时，npm 包也已经安装成功，可以输入 npm -v 查看版本号

输入 npm -g install npm ，将 npm 更新至最新版本。

之后可以选择安装 cnpm，即 npm 的国内镜像。使用 cnmp 的好处是在日后下载内容时会比较快，但是下载的包可能不是最新的。

安装 cnpm 的命令为：

npm install -g cnpm --registry=https://registry.npm.taobao.org

完成后就可以使用 cnpm 替代 npm 了，我不太喜欢用 cnpm，喜欢用的小伙伴注意一点，cnpm 不要与 npm 混合使用，一个项目用 cnpm 就从头用到底，不要中途敲错命令，否则就会出现混乱。不过万一遇到这种情况也不用慌，把项目的 node_modules 文件夹删了重新执行 npm/cnpm install 就行了，只是比较浪费时间。

之后，使用 npm install -g vue-cli 安装脚手架。
在这里插入图片描述
注意此种方式安装的是 2.x 版本的 Vue CLI，最新版本需要通过 npm install -g @vue/cli 安装。新版本可以使用图形化界面初始化项目，并加入了项目健康监控的内容，但使用新版本创建的项目依赖与这个教程不太相符，折腾起来比较麻烦。

虽然我也想专门针对新的 CLI 和 Vue 3.0 重构一下教程，但想了想这是个无休止的工作，这个教程也不是为了讲前端框架的新特性，而且直到现在 Vue 3.0 也只是发布了初期试验版本，想必又是一堆依赖问题，所以就不折腾了。

二、构建前端项目

1.通用方法

直接使用命令行构建项目。首先，进入到我们的工作文件夹中，我在 D 盘新建了一个叫 workspace 的文件夹，大家可以自行选择位置。
在这里插入图片描述
然后执行命令 vue init webpack wj-vue，这里 webpack 是以 webpack 为模板指生成项目，还可以替换为 pwa、simple 等参数，这里不再赘述。 wj-vue 是我们的项目名称（White Jotter），大家也可以起别的名字。

在程序执行的过程中会有一些提示，可以按照默认的设定一路回车下去，也可以按需修改，比如下图问我项目名称是不是 wj-vue，直接回车确认就行。

在这里插入图片描述
这里还会问是否安装 vue-router，一定要选是，也就是回车或按 Y，vue-router 是我们构建单页面应用的关键。

还有是否使用 es-lint，这玩意儿挺烦的，但为了代码质量先将就一下吧。

接下来等待项目构建完成就 OK 了。
在这里插入图片描述
可以看到 workspace 目录下生成了项目文件夹 wj-vue，里面的结构如图

接下来，进入到我们的项目文件夹里(cd D:\workspace\wj-vue)，执行npm run dev

项目构建成功，这一步如果报错，可能是未能加载项目所需的依赖包，即 node_modules 里的内容，需要在该文件夹执行 npm install ，再执行 npm run dev

访问 http://localhost:8080，查看网页 demo，大工告成！
在这里插入图片描述

2.使用 IDE (IntelliJ IDEA)

对于习惯使用 IDE 的同学，可以使用更直观的方式构建项目。以 IntelliJ IDEA 为例，点击 Create New Project
在这里插入图片描述
然后选择 Static Web -> Vue.js，点击 next，输入相关参数

此处可以选择 CLI 的版本

这里注意 Project location 需要输入到项目文件夹一级而不是 workspace。输入完成后点击 Next，等待 Vue CLI 初始化，然后在可视化界面上确认项目信息，修改或 Next 即可。IDEA 构建出的 Vue 项目是不含 node_modules 的，所以要先调出终端，执行 npm install
在这里插入图片描述
运行完成后，输入 npm run dev 即可。

另外 IDE 嘛，总是在 UI 上下了很多功夫，我们还可以在 package.json 文件上点击右键，选择 show npm scripts

然后就会出来 npm 命令窗口，想要执行哪个命令直接双击运行就可以了。
在这里插入图片描述
这些命令都是在 package.json 文件里预定义的。dev 和 start 是一样的，start 即是执行 npm run dev 命令

另外使用这种方法，可以激活 IDE 右上角的按钮，不过这些都不重要了。

上面的内容应该足够详细了，如果大家还是遇到了问题，可以在评论区反馈一下，我会第一时间解答。

三、Vue 项目结构分析

1.概览

使用 CLI 构建出来的 Vue 项目结构是这个样子的
在这里插入图片描述
里面我们需要关注的内容如下图，重点需要关注的我用小红旗标了出来

其中我们最常修改的部分就是 components 文件夹了，几乎所有需要手动编写的代码都在其中。

2.x 时代没有创建 view 这个目录，其实加上更加合理，现在我们姑且认为 Vue 把视图也当做“组件”的一部分，有助于初期的理解。

接下来我们分析几个文件，目的是看看各个部分是怎么联系到一起的。

2.index.html

首页文件的初始代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>wj-vue</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

就是一个普普通通的 html 文件，让它不平凡的是 <div id="app"></div> ，下面有一行注释，构建的文件将会被自动注入，也就是说我们编写的其它的内容都将在这个 div 中展示。

还有不普通的一点是，整个项目只有这一个 html 文件，所以这是一个 单页面应用，当我们打开这个应用，表面上可以有很多页面，实际上它们都只不过在一个 div 中。

3.App.vue

上面图上我把这个文件称为“根组件”，因为其它的组件又都包含在这个组件中。

.vue 文件是一种自定义文件类型，在结构上类似 html，一个 .vue 文件即是一个 vue 组件。先看它的初始代码

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</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>

大家可能注意到了，这里也有一句 <div id="app">，但跟 index.html 里的那个是没有关系的。这个 id=app 只是跟下面的 css 对应。

<script>标签里的内容即该组件的脚本，也就是 js 代码，export default 是 ES6 的语法，意思是将这个组件整体导出，之后就可以使用 import 导入组件了。大括号里的内容是这个组件的相关属性。

这个文件最关键的一点其实是第四行， <router-view/>，是一个容器，名字叫“路由视图”，意思是当前路由（ URL）指向的内容将显示在这个容器中。也就是说，其它的组件即使拥有自己的路由（URL，需要在 router 文件夹的 index.js 文件里定义），也只不过表面上是一个单独的页面，实际上只是在根组件 App.vue 中。

4.main.js

前面我们说 App.vue 里的 <div id="app"> 和 index.html 里的 <div id="app"> 没有关系，那么这两个文件是怎么建立联系的呢？让我们来看入口文件 main.js 的代码

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

这里插一嘴，这个 js 文件有的同学可能看着不顺眼，比如没有分号（;），因为是 ES6 的语法，不这么写反而会提示错误，虽说可以把 es-lint 改了或者关了，但我想熟悉一下新的规则也挺好。

最上面 import 了几个模块，其中 vue 模块在 node_modules 中，App 即 App.vue 里定义的组件，router 即 router 文件夹里定义的路由。

Vue.config.productionTip = false ,作用是阻止vue 在启动时生成生产提示。

在这个 js 文件中，我们创建了一个 Vue 对象（实例），el 属性提供一个在页面上已存在的 DOM 元素作为 Vue 对象的挂载目标，router 代表该对象包含 Vue Router，并使用项目中定义的路由。components 表示该对象包含的 Vue 组件，template 是用一个字符串模板作为 Vue 实例的标识使用，类似于定义一个 html 标签。

看完了以上三个文件，我想基本上就对前端项目的结构有所了解了。下一篇中我将用一个例子解释前后端分离的项目是如何联系起来的。

查看系列文章目录：
https://learner.blog.csdn.net/article/details/88925013

上一篇：Vue + Spring Boot 项目实战（一）：项目简介

下一篇：Vue + Spring Boot 项目实战（三）：前后端结合测试（登录页面开发）

收起

展开全文

Vue.js

(精华)2020年12月23日 .NET Core CLI启用TAB自动补全功能
收起
bash

vue cli 3 升级到 vue cli 4 方法步骤及升级点总结

万次阅读 多人点赞 2019-10-26 18:45:44

vue cli 3 升级到 vue cli 4 指南 vue cli 3 升级到 vue cli 4 方法步骤及升级点总结 vue-cli 3升级vue-cli 4 官方英文升级文档，中文滞后一.首先，在全局安装最新的 Vue CLI： npm install -g @vue/cli # OR yarn ...

vue cli 3 升级到 vue cli 4 方法步骤及升级点总结

官方升级英文文档，中文文档相对滞后。

简介：vue cli 4 官方已经更新有一段时间了，现在是4.0.5 版本，看了官方文档大概有二十几点的更新，还是干货满满呀，值得升级一下，下面是升级步骤。

一.首先，在全局安装最新的 Vue CLI：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

检查安装的版本

vue -V  # 输出:@vue/cli 4.x.x  说明@vue/cli 4安装成功( vue cli 3的版本会输出 3.x.x )

踩坑记录

npm install -g @vue/cli 执行成功，但是执行 vue -V 输出的还是3.5.6(我以前安装的版本)，

于是又重新执行 npm install -g @vue/cli，显示成功，执行 vue -V 输出的还是3.5.6，

一脸懵逼，然后重启电脑，再执行vue -V 输出 @vue/cli 4.0.5，解决。

二.在项目根目录下执行

vue upgrade

然后出现
在这里插入图片描述

提示 继续升级这些插件吗？ 输入 Y 即可.

三.等步骤二执行完会发现主要有 2 个文件被修改

1.文件 babel.config.js

主要是 babel 的预设由@vue/app 改成了@vue/cli-plugin-babel/preset

原来的

module.exports = {
  presets: [
    '@vue/app', //  这行
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'entry'
      }
    ]
  ]
}

升级后的

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset', //  这行
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'entry'
      }
    ]
  ]
}

2.文件 package.json （package-lock.json 也会更改）

主要是依赖升级

原来的

{
  "@vue/cli-plugin-babel": "^3.11.0",
  "@vue/cli-plugin-eslint": "^3.11.0",
  "@vue/cli-service": "^3.11.0"
}

升级后的

{
  "@vue/cli-plugin-babel": "^4.0.5",
  "@vue/cli-plugin-eslint": "^4.0.5",
  "@vue/cli-service": "^4.0.5"
}

四.然后启动项目

npm run serve

然后报下面的错

在这里插入图片描述

1.第一个错（警告）

 WARN  A new version of sass-loader is available. Please upgrade for best experience.

这行是 vue cli 4 升级了自己的依赖 sass-loader 导致的

它把 sass-loader由 ^7.x.x 的版本升级到了 ^8.0.0,而我项目中使用的是^7.1.0

所以升级一下自己项目的 sass-loader 就好了

执行下面命令即可

npm i sass-loader@8.0.0 -D

2.然后第二个错说没有安装core-js

vue cli 4把 core-js由 ^2.x.x 的版本升级到了 ^3.x.x

于是安装一下

npm i core-js

然后重启项目还是不行，看了下官方文档和 babel 有关

main.js 代码中

import '@babel/polyfill'

隐藏这个代码

重启好了

然后把 @babel/polyfill 换成 babel-polyfill 即可

npm i babel-polyfill

main.js 代码中改为

import 'babel-polyfill'

五.vue cli 4 主要升级点总结

1."@vue/cli-plugin-babel", "@vue/cli-plugin-eslint", "@vue/cli-service"由 v3 的版本升级到了 v4

2.sass-loader由 v7 的版本升级到了 v8

3.core-js由 v2 的版本升级到了 v3

4.webpack-chain由 v4 的版本升级到了 v6

5.css-loader由 v1 的版本升级到了 v3

6.url-loader由 v1 的版本升级到了 v2

7.file-loader由 v3 的版本升级到了 v4

8.copy-webpack-plugin由 v4 的版本升级到了 v5

9.terser-webpack-plugin由 v1 的版本升级到了 v2

10.@vue/cli-plugin-pwa由 v3 的版本升级到了 v4

11.新增插件 vue add vuex vue add router

12.pug-plain已重命名为pug-plain-loader

13.默认目录结构已更改

src/store.js 改为 src/store/index.js

src/router.js 改为 src/router/index.js

14.由于兼容性原因，仍支持 router＆routerHistoryMode 选项 preset.json

但是现在建议使用它来 plugins: { '@vue/cli-plugin-router': { historyMode: true } }

获得更好的一致性

15.api.hasPlugin('vue-router')不再受支持，现在 api.hasPlugin('router')

16.lintOnSave 选项的默认值（未指定时）从 true 更改为 default

17.废弃vue-cli-service test:e2e

18.@vue/cli-plugin-e2e-nightwatch Nightwatch.js已从0.9升级到1.x

19.@vue/cli-plugin-unit-mocha 升级到Mocha 6

20.@vue/cli-plugin-unit-jest jest由 v23 升级到v24

21.@vue/cli-plugin-typescript 更好的ts(x)支持，胜过js(x)

参考链接

vue cli 4 官方英文升级文档

收起

展开全文

vue.js 三种方式安装(vue-cli)

万次阅读 多人点赞 2018-05-29 07:49:05

若没有cd到项目中安装项目的依赖：cnpm install/npm install 二、升级：vue-cli3.0 一、使用vue-cli3.0 Vue CLI的包名称由vue-cli改成了@vue/cli 如果你已经全局安装了旧版本的vue-cli(3.0以下)，你需要先通过npm ...

Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

下面介绍三种 Vue.js 的安装方法：

1.独立版本

我们可以在Vue.js的官网上直接下载vue.js,并在.html中通过<script>标签中引用。-> <script src = ../vue.js> </script> 开发环境不要使用最小压缩版，不然会没有错误提示和警告！（页面中直接使用）

使用vue多页面开发：

引入vue.js
创建一个vue根实例 new Vue({选项})

2.使用CDN方法

BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js ，（国内不稳定）
unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。（推荐使用）
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js，如（<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>）

3.NPM方法（推荐使用）

在用Vue.js构建大型应用的时候推荐使用NPM安装方法，NPM能很好的和诸如Webpack或者Browserify 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。

首先，先列出我们接下来需要的东西：

node.js环境（npm包管理器）
vue-cli 脚手架构建工具
cnpm npm的淘宝镜像

1）安装node.js

从node.js官网下载并安装node，安装过程很简单，一直点下一步就ok了，安装完之后，我们通过打开命令行工具（win+R）,输入

node -v 命令，查看node的版本，若出现相应的版本号，则说明你安装成功了。

npm包管理器，是集成在node中的，所以安装了node也就有了npm,直接输入 npm -v 命令，显示npm的版本信息。

到目前为止，node的环境已经安装完成，npm 包管理器也有了，由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们还需要npm的国内镜像----cnpm.

2）安装cnpm

在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org ，然后等待，没报错表示安装成功，（我的已经安装过了，显示更新成功的信息），如下图：

完成之后，我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的，查看淘宝npm镜像官网。

3）安装vue-cli 脚手架构建工具（必须在全局中进行安装）

在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。

是否安装成功：vue -V

通过以上三部，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。

首先我们要选择存放项目的位置，然后再用命令行cd到项目的目录中，在这里，我选择在c盘下创建新的目录（NodeTest 目录），用cd 将目录切到该目录下，如下图：

在NodeTest 目录下，在命令行中运行命令 vue init webpack firstApp（初始化一个完整版的项目）。解释一下这个命令，这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中firstApp是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中（我的实例中，会在NodeTest 目录生成该文件夹），如下图：

若我们在编辑器中已经手动创建了这个项目存放的文件夹cd到项目中：vue init webpack;初始化一下即可,同时还会加载webpack所依赖的包：

是否是在本目录下进行创建

输入命令后，会询问我们几个简单的选项，我们根据自己的需要进行填写就可以了。

Project name :项目名称，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了vueclitest
Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
Author：作者，如果你有配置git的作者，他会读取。
Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n（建议），如果你是大型团队开发，最好是进行配置。
setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n

运行初始化命令的时候会让用户输入几个基本的配置选项，如项目名称、项目描述、作者信息，对于有些不明白或者不想填的信息可以一直按回车去填写就好了，等待一会，就会显示创建项目创建成功，如下图:

接下来，我们去NoteTest目录下去看是否已创建文件：

打开firstApp 项目，项目中的目录如下：

介绍一下目录及其作用：

build：最终发布的代码的存放位置。

config：配置路径、端口号等一些信息，我们刚开始学习的时候选择默认配置。

node_modules：npm 加载的项目所需要的各种依赖模块。

src：这里是我们开发的主要目录（源码），基本上要做的事情都在这个目录里面，里面包含了几个目录及文件：

assets:放置一些图片(会根据图片大小分类进行base64命名还是其他方式命名)，如logo等

components:目录里放的是一个个的组件文件

router/index.js：配置路由的地方

App.vue：项目入口组件（跟组件），我们也可以将组件写这里，而不使用components目录。主要作用就是将我们自己定义的组件通过它与页面建立联系进行渲染，这里面的<router-view/>必不可少。

main.js ：项目的核心文件（整个项目的入口js）引入依赖包、默认页面样式等（项目运行后会在index.html中形成一个app.js文件）。

static：静态资源目录(会原分不动的对文件进行处理)，如图片、字体等。

test：初始测试目录，可删除

.XXXX文件：配置文件。

index.html：html单页面的入口页面，可以添加一些meta信息或者同统计代码啥的或页面的重置样式等。

package.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。（大概版本）

package-lock.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。（具体版本）

README.md：项目的说明文件。

webpack.config.js：webpack的配置文件，例：把.vue的文件打包成浏览器能读懂的文件。

.babelrc:是检测es6语法的配置文件，例：适配哪些浏览器的限制

.gitignore:上传到服务器忽略哪些文件的配置（比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置）

.postcssrc.js:前缀的配置（css转化的配置）

.editorconfig:对代码进行规范，例：root是否进行检测，代码尾部是否换行，缩行前面几个空格...（建议定义这个规范）

.eslintrc.js:配置eslint语法规则（在这里面的rules属性中配置让哪个语法规则失效）

.eslintignore:忽略eslint对项目某些文件的语法规则的检查

这就是整个项目的目录结构，其中，我们主要在src目录中做修改（模块化开发）。这个项目现在还只是一个结构框架，整个项目需要的依赖资源都还没有安装。

cd 项目名；进入项目中

安装项目所需要的依赖包/插件（在package.json可查看）：执行 cnpm install (npm可能会有警告，这里可以用cnpm代替npm了，运行别人的代码需要先安装依赖)如果创建项目的时候没有报错，这一步可以省略。如果报错了 cd到项目里面运行 cnpm install / npm install

若拿到别人的项目或从gethub上下载的项目第一步就是要在项目中cnpm install;下载项目所依赖的插件，然后npm run dev 运行项目

安装完成之后，我们到自己的项目中去看，会多一个node_modules文件夹，这里面就是我们所需要的依赖包资源。

安装完依赖包资源后，我们就可以运行整个项目了。

运行项目

在项目目录中，运行命令 npm run dev （npm run start），会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

项目启动后，在浏览器中输入项目启动后的地址：

在浏览器中会出现vue的logo：

至此，vue的三种安装方式已介绍完毕。

项目完成后输入打包命令:cnpm run build;会生成一个dist文件，就是我们的打包文件，点击.html文件能运行则成功。

一、搭建vue的开发环境（大纲）

必须安装node.js
搭建vue的开发环境，安装vue的脚手架工具官方命令行工具

npm install - -global vue-cli

3.创建项目必须cd到对应的一个项目里面

vue init webpack vue-demo01

cd vue-demo01

cnpm install / npm install 如果创建项目的时候没有报错，这一步可以省略。如果报错了 cd到项目里面运行 cnpm install / npm install

npm run dev/npm run start

4.另一种创建项目的方式中小型项目（推荐） ***

vue init webpack-simple vuedemo02

cd vuedemo02

cnpm install / npm install

npm run dev

拿到别人的项目不能正常运行后看有没有node_modules这个文件（项目所有的依赖），若没有cd到项目中安装项目的依赖：cnpm install/npm install

二、升级：vue-cli3.0

一、使用vue-cli3.0

Vue CLI的包名称由vue-cli改成了@vue/cli
如果你已经全局安装了旧版本的vue-cli(3.0以下)，你需要先通过npm uninstall vue-cli -g/yarn global remove vue-cli卸载它。
Node.js8.9+
安装vue3.0 npm install -g @vue/cli 或者 yarn global add @vue/cli
版本是否是3.x vue --version/vue -V

通过vue-cli创建项目

创建项目命令

vue create 项目名; 项目名不建议存在大写，中间用-隔开

这时候需要注意创建项目需要预先安装的插件：

默认的会有Babel + ESLint；但是不建议默认，选择下面：

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的状态管理模式）
( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试（unit tests）
( ) E2E Testing // e2e（end to end）测试

等待项目初始化完成。。。。。。

1.cd 到项目里

2.npm run serve 运行项目

或者使用图形化界面创建项目：

vue ui

自定义配置文件：vue.config.js(固定)

创建好项目后会发现找不到webpack.config.js配置文件，这是vue-cli3不想让我们随意看到配置文件隐藏起来了，可以通过在根目录下创建一个vue.config.js(名字固定)来添加我们的配置(在运行时会自动添加到webpack.config.js文件上)

三、vue-cli3中拉取vue-cli2

拉取 2.x 模板 (旧版本)

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

https://cli.vuejs.org/zh/guide/creating-a-project.html

runtime+compiler和runtime-only的区别：在main.js文件中

  /**
   *等价于
  render: function(h) {
    return h(App);
  }
    等价于
  render: function(createElement) {
    return createElement('h2');
  }
  */

看了那么多的vue.js的安装方式总结一下。如有不多请多多指教！希望给您带来帮助！

参考文献：https://blog.csdn.net/m0_37479246/article/details/78836686

收起

展开全文

vue vuejs安装前端 vue教程 vue3.0

【vue】使用vue-cli4.0快速搭建一个项目

万次阅读 多人点赞 2019-10-25 10:38:43

前言最近公司的项目终于到了空闲期，而闲不住的我终于把目标放到了项目的迁移上面因为公司的项目比较早的原因（虽然...所以所有项目开发的时候一直在用的 vue-cli2.0，后来项目多了也没时间就没往 vue-cli3.0 迁...

前言

最近公司的项目终于到了空闲期，而闲不住的我终于把目标放到了项目的迁移上面

因为公司的项目比较早的原因（虽然当时vue-cli3.0也出来了一段时间，但是不敢轻易尝试啊！）

而又因为公司的前端项目都是我来搭建的原因（并不是技术大佬，入职早！）

所以所有项目开发的时候一直在用的 vue-cli2.0

后来项目多了也没时间就没往 vue-cli3.0 迁移

现在终于到了空闲期，可以尝试着慢慢迁移了

本篇文章就是主要记录迁移的过程和 vue-cli3.0 的搭建过程

一、升级本地环境

因为 vue-cli3.0 要 nodeJs ≧ 8.9（官方推荐 8.11.0+），所以我们先去官网下载一个稳定的新版本覆盖本地版本

我安装的是 node12.13.0 版本，因为之前我本地全局安装了 2.0 的环境，所以需要全局卸载再安装 3.0

npm uninstall -g vue-cli

npm install -g @vue/cli

安装好了之后输入 vue -V 查看版本

我我我草！！！最近只顾着看技术了，没发现10月16日官方已经宣布 vue-cli4.0 已经正式发布了！！！

有没有搞错，我 vue-cli3.0 还没来得及用上呢！还好看了下文档，除了跟 vue-cli3.0 的目录有点变化其他没变。

那就直接开始搞 vue-cli4.0 吧！

二、搭建项目

vue-cli3.0 以后项目创建的命令变成了下面这样

vue create <Project Name> //文件名 不支持驼峰（含大写字母）

竟然还被嫌弃了我的网速，我还就不用 cnpm 了！

选择不使用淘宝镜像后，选择手动配置

default 是使用默认配置

Manually select features 是自定义配置

我的自定义配置如下

选择是否使用路由 history router，其实直白来说就是是否路径带 # 号，建议选择 N，否则服务器还要进行配置

css 的预处理器我选择的是 Sass/SCSS(with dart-sass) 。node-sass是自动编译实时的，dart-sass需要保存后才会生效

sass 官方目前主力推 dart-sass 最新的特性都会在这个上面先实现

选择 ESLint 代码校验规则，提供一个插件化的javascript代码检测工具，ESLint + Prettier 使用较多

然后选择什么时候进行代码校验，Lint on save 保存就检查，Lint and fix on commit fix 或者 commit 的时候检查，建议第一个

下面就是如何存放配置了，In dedicated config files 存放到独立文件中，In package.json 存放到 package.json 中

本着项目结构简单的想法，我选择了第二个

最后就是是否保存本次的配置了，N 不记录，如果选择 Y 需要输入保存名字

我这里就不保存了，原因是熟能生巧！哈哈哈

然后就等待创建项目吧

出现如图红框所示的提示，就搭建成功，进入项目目录，直接输入 npm run serve 就可以了

你以为这样就完了吗？我也是这样认为的，可它不是这样的！

很明显，虽然项目能够正常启动，但是我的 nodeJs 版本用的太高了，然后我给回退到了 11.11.0 版本

虽然没影响太大的影响，但是我不想看见 WARN！回退之后，重新跑项目就不会有问题了。

三、环境配置

下面就是关于项目的环境配置了，我这边一般喜欢用 test、preview、production分别表示测试，预览，生产三种环境

修改 package.json 文件如下

"scripts": {
    "serve": "vue-cli-service serve",
    "test": "vue-cli-service build --mode test",           //测试
    "preview": "vue-cli-service build --mode preview",     //预览
    "build": "vue-cli-service build --mode production",    //生产
    "lint": "vue-cli-service lint"
},

在项目根目录下新建 .env.test、.env.preview、 .env.production 文件，分别对应三个环境的配置文件，注意，名字要与 --mode 后面的名字分别对应

.env.test 代码如下

NODE_ENV="test"
VUE_APP_BASE_URL="测试环境域名"

.env.pre 代码如下

NODE_ENV="preview"
VUE_APP_BASE_URL="预览环境域名"

.env.prod 代码如下

NODE_ENV="production"
VUE_APP_BASE_URL="生产环境域名"

ok，这样环境就配置好了，分别用以下命令来打包不同环境的包就可以了

npm run test    //测试
npm run pre     //预发布
npm run prod    //生产

另外需要说明一点的是，本地环境会默认从 .env.development 文件中读取配置

所以记得有需要记得新建一个然后存放配置

我的 .env.development 代码如下

NODE_ENV="development"
VUE_APP_BASE_URL="本地环境域名"

四、项目配置

从 vue-cli3.0 开始 build 和 config 目录就取消了，如果需要修改配置，可以在项目的根目录新建一个 vue.config.js 文件来覆盖项目的配置，因为项目的配置比较多，这里就不分别介绍了，可以访问官方文档

五、项目迁移

剩下的就是比较简单的工作了，因为 2.0/3.0/4.0 的src目录是基本一致的，所以照着原来的项目搬进来就可以了

唯一需要注意的就是路径的问题了

结束语

本来，这个文章真的是为了从 2.0 迁移到 3.0 的，没想到 4.0 都发布了，那刚好迁移到 4.0 得了

文章标题我会修改为 4.0，但是文章内可能还会有 3.0 我就不修改了

一是证明我的最初想法，二是感慨前端的发展速度！

有问题欢迎评论指出

收起

展开全文

vue vue项目迁移

vue cli3 兼容ie8以上浏览器
万次阅读 2019-11-28 17:49:42
1当我们使用 vue-cli3 搭建的脚手架开发项目时，一般浏览器都可以支持，唯独ie浏览器，运行时页面一片空白首先，下载 babel-polyfill 模块 npm install babel-polyfill -s 2 配置 polyfill，在根目录下新增babel....
收起
兼容ie
vue cli3配置image-webpack-loader
万次阅读 2019-12-04 12:08:04
vue cli3配置image-webpack-loader对图片进行压缩优化安装 npm install image-webpack-loader --save-dev 配置vue.config.js chainWebpack: config => { config.plugins.delete('prefetch') config.plugin('...
收起
Vue02_第一个vue-cli项目
万次阅读 2020-08-31 16:21:43
Vue02_第一个vue-cli项目 nodejs 的下载和安装官网下载（选择windows64位的版本）：http://nodejs.cn/download/ 安装：无脑下一步测试是否安装成功：安装淘宝镜像： npm install cnpm -g 使用淘宝镜像安装 ...
收起
vue
nvme-cli常用指令
万次阅读 多人点赞 2018-10-17 14:17:48
NVMe management command line interface ...unzip nvme-cli-master.zip cd nvme-cli-master.zip make &amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp; ma
收起
nvme硬盘
vue-cli3.0使用及配置（部分）
万次阅读 多人点赞 2018-06-19 22:18:28
1.先全局安装vue-cli3.0 检测安装： vue -V 2.创建项目（这个就跟react创建脚手架项目比较像了）这里如果你是第一次用3.0版本的话，是没有前两个的，而只有最后两个，这里是让你选...
收起
03-Vue.js环境准备-使用vue-cli快速搭建项目(cli3+)
万次阅读 2020-09-11 00:21:38
@vue/cli 4.5.4的Vue.js和cli。三、安装vue-cli 使用npm全局安装vue-cli： npm install -g @vue/cli 可以使用如下的创建项目的命令，查看vue cli的安装情况：按照上面的提示，先卸载之前的版本，然后安装...
收起
Vue.js Node.js HTML 前端
vue-cli3与vue-cli4的区别
万次阅读 2020-01-17 16:58:32
@vue/cli-plugin-pwa、@vue/cli-service等包的增强原来在根目录下的vuex.js、route.js被分别放到了对应的文件夹下希望大家补充和细化
收起
vue 前端程序人生
Vue CLI 3 -- 从卸载Vue CLI 2到安装Vue CLI3
千次阅读 2019-06-15 12:24:57
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。 2.Node 版本要求 Vue CLI ...
收起
vue cli2/cli3安装
千次阅读 2019-06-14 21:36:04
cli cli是什么？ cli是vue提供的一个快速（自动化）构建项目的一个脚手架，类似于我们之前所学的 express-generator cli的版本目前最新 3.x 老版本是 2.x cli的底层的自动化工具是： webpack cli的安装 ...
收起
关于vue-cli 中执行的 vue-cli-service
万次阅读 2020-04-21 17:17:20
最近又整回vue去了，不说了，还是脚手架先整吧。..."scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, 这里执行的是vue-cli...
收起
vue
Python使用pip安装报错ModuleNotFoundError: No module named 'pip._internal.cli.main'的解决方法
万次阅读 多人点赞 2020-04-26 09:43:18
Python使用pip安装报错ModuleNotFoundError: No module named 'pip._internal.cli.main’的解决方法大家好，我叫亓官劼（qí guān jié ），在CSDN中记录学习的点滴历程，时光荏苒，未来可期，加油~博客地址...
收起
Angular CLI
千次阅读 2018-01-11 23:22:57
Angular CLI是一个命令行界面工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。相比手动进行这些操作，Angular CLI能让开发更加简单快捷。前提 CLI和生成的项目有一些依赖，...
收起
Angular Angular5
vue-cli
千次阅读 2020-11-27 13:30:11
vue-cli2和vue-cli3的区别 https://www.cnblogs.com/webdragon/p/11025921.html 网上很多vue-cli2和vue-cli3混合在一起的博文, 但大部分都没写是哪个版本的 vue-cli3的两种创建方式: vue ui 和 vue create 项目名 ...
收起
vue
浅谈vue-cli 3 和 vue-cli 2的区别！！！
万次阅读 多人点赞 2018-08-13 17:12:21
Vue-cli3.0于8.11日正式发布，看了下评论，不是特别的乐观，说说我个人的意见，我是Vue的忠实粉，so.... 大概三个月前超哥就已经得知3.0的消息，试着用了下，相比之下现在的3.0和测试时的区别： modern mode。启用...
收起
安装Vue CLI
千次阅读 2020-11-28 17:30:27
安装Vue CLI 1.安装Vue CLI=>3 npm install -g @vue/cli 2.检验Vue CLI版本 vue -V 3.创建vue project vue create projectname 4.拉取2.x模板有时后会使用Vue CLI2.x的项目模板，就需要拉取2.x的模板下来 #...
收起
vue npm
浅析vue-cli2和vue-cli4
千次阅读 2020-05-11 16:04:39
查看当前版本，如果是2开头说明当前使用的是vue-cli2，3开头的话就是vue-cli3 vue --version 如果无法识别vue命令说明没有安装vue-cli，使用以下说明进行安装安装2.0版本: npm install -g vue-cli 安装3.0版本： ...
收起
vue-cli 3.0脚手架cli-service配置
万次阅读 2019-07-17 17:27:24
CLI服务在package.json使用默认预设的项目中看到的内容 { "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" } } 您可以使用npm或Yarn调用这些脚本： npm run serve # ...
收起
vue 配置
Vue CLI 3中启动cli服务参数说明
千次阅读 2020-03-11 14:32:41
在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。这是你使用...
收起
vue
Common CLI
千次阅读 2016-04-19 23:24:10
1.Commons CLI Apache Commons CLI提供了解析命令行参数的API。它也可以在命令行打印详细的参数信息。官网教程：http://commons.apache.org/proper/commons-cli/usage.html，Commons CLI的Javadoc：...
收起
Java
vuecli2升级至vuecli3
千次阅读 2019-07-09 21:19:24
卸载旧版本vuecli与安装新版本vuecli npm uninstall vue-cli -g npm install -g @vue/cli 二.创建一个新的项目 vue create hello-world 三.正式开始改造 1. 直接复制替换src文件夹2. 安装项目需要的依赖...
收起
vue
如何安装 Angular CLI 并且检查 CLI 的版本
千次阅读 2019-05-17 02:34:33
想在系统中安装 Angular CLI ，如何进行安装并且如何检查 CLI 的版本？可以使用命令： npm install -g @angular/cli 进行安装。使用命令 ng version 来查看 Angular 的 CLI 的版本 ...
收起
Angular
@vue/cli使用教程（vue-cli3.0）
万次阅读 2019-04-12 17:50:41
提示：Vue CLI要求Node.js版本8或者更高（8.10.0+ 推荐）。这一部分请访问网址：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143450141843488beddae2a1044cab5...
收起
win10下vue cli2.9.6升级cli3.+
千次阅读 2020-05-09 20:02:27
1.首先根据网上的教程，先卸载低版本的cli，再升级cli3.如下： C:\Users\feng>vue -V 2.9.6 C:\Users\feng>npm uninstall -g @vue/cli up to date in 0.039s C:\Users\feng>npm install -g @vue/cli ...
收起
vue nodejs npm

Vue + Spring Boot 项目实战（二）：使用 CLI 搭建 Vue.js 项目

本篇目录

前言

一、安装 Vue CLI

二、构建前端项目

1.通用方法

2.使用 IDE (IntelliJ IDEA)

三、Vue 项目结构分析

1.概览

2.index.html

3.App.vue

4.main.js

(精华)2020年12月23日 .NET Core CLI启用TAB自动补全功能

vue cli 3 升级到 vue cli 4 方法步骤及升级点总结

vue cli 3 升级到 vue cli 4 方法步骤及升级点总结

vue.js 三种方式安装(vue-cli)

一、搭建vue的开发环境（大纲）

二、升级：vue-cli3.0

自定义配置文件：vue.config.js(固定)

三、vue-cli3中拉取vue-cli2

拉取 2.x 模板 (旧版本)

【vue】使用vue-cli4.0快速搭建一个项目

前言

一、升级本地环境

二、搭建项目

三、环境配置

四、项目配置

五、项目迁移

结束语

vue cli3 兼容ie8以上浏览器

vue cli3配置image-webpack-loader

Vue02_第一个vue-cli项目

nvme-cli常用指令

vue-cli3.0使用及配置（部分）

03-Vue.js环境准备-使用vue-cli快速搭建项目(cli3+)

vue-cli3与vue-cli4的区别

Vue CLI 3 -- 从卸载Vue CLI 2到安装Vue CLI3

vue cli2/cli3安装

关于vue-cli 中执行的 vue-cli-service

Python使用pip安装报错ModuleNotFoundError: No module named 'pip._internal.cli.main'的解决方法

Angular CLI

vue-cli

浅谈vue-cli 3 和 vue-cli 2的区别！！！

安装Vue CLI

浅析vue-cli2和vue-cli4

vue-cli 3.0脚手架cli-service配置

Vue CLI 3中启动cli服务参数说明

Common CLI

vuecli2升级至vuecli3

如何安装 Angular CLI 并且检查 CLI 的版本

@vue/cli使用教程（vue-cli3.0）

win10下vue cli2.9.6升级cli3.+

cli