Vue.js安装教程

目的：记录使用npm安装方式安装Vue.js的过程，方便参考和借阅

No 1. 安装Node.js （如果电脑上已经安装了npm环境的同学，就不用再次安装，可以跳过此步骤直接到No.2）

1.1 进入到右边的网页地址 https://nodejs.org/en/

1.2 进入之后，点击下载（download）

1.3 选LTS版本的：这是稳健版的。

会自动根据电脑配置下对应的版本号。

下载完成后，点击安装文件

这个安装程序，写的非常好。
最关键的是，如果对之前的哪一步不满意，就直接点击back就返回了，不用太担心。

一般来说，直接默认往下走就好了，在destination folder那，可以选择自己喜欢的安装目录。

之后就可以使用了。

效果如下：

(注：命令窗口中要切换到node.js安装目录下再执行npm命令，否则要配置环境变量,配置环境变量可参考博客：https://blog.csdn.net/qq_29712995/article/details/79094433 )

No 2. 使用Npm安装Vue.js

2.1 由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。

2.2 在用 Vue.js 构建大型应用时推荐使用 NPM 安装：

# 最新稳定版

$ cnpm install vue

2.3 完成安装

No 3. 命令行工具

3.1 命令行构建 ( Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。 )

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.For Vue 1.x use: vue init webpack#1.0 my-project
? Project name myproject
? Project description xxxxxxxx
? Author chenjunzhen
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? 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) npmvue-cli · Generated "myproject".# Installing project dependencies ...
# ========================npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.> uglifyjs-webpack-plugin@0.4.6 postinstall E:\workHouse\cjz\前端学习\Vue\2018-09-25\vue\myproject\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.jsnpm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})added 1132 packages from 656 contributors and audited 10615 packages in 178.578s
found 1 moderate severity vulnerabilityrun `npm audit fix` to fix them, or `npm audit` for details# Project initialization finished!
# ========================To get started:cd myprojectnpm run devDocumentation can be found at https://vuejs-templates.github.io/webpack

(PS :

在安装时会询问你，①、Project name (sanfeng1)；项目名称（sanfeng1）。（确定按enter，否按N）

　　　　　　　　　　　　　②、 Project description (A Vue.js project)；项目描述（一vue.js项目）。（随意输入一段简短介绍，用英文）

　　　　　　　　　　　　　③、Author (sunsanfeng)；作者（sunsanfeng）。（确定按enter，否按N）

　　　　　　　　　　　　　④、Vue build (Use arrow keys)> Runtime + Compiler: recommended for most usersRuntime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render 　　　　　　　　functions are required elsewhere；Vue公司的建立（使用箭头键）>运行时+编译器：大多数用户推荐运行时间：约6kb轻民+ gzip，但模板（或任何Vue具体HTML）只允许在。VUE文件渲染功能是必需的其他地方。（按enter）

　　　　　　　　　　　　⑤、Install vue-router? (Y/n)；安装的路由？（/ N）。（可安可不安，以后也可以再安，根据需求选择）

　　　　　　　　　　　　⑥、Use ESLint to lint your code? (Y/n)；使用ESlint语法？（Y/ N）。（使用ESLint语法，就要做好心理准备，除非你非常懂ESLint语法，要不就会处处报错，我就被逼疯过，建议N）

　　　　　　　　　　　　⑦、Setup unit tests with Karma + Mocha? (Y/n)；设置单元测试？（Y / N）。（选N）

　　　　　　　　　　　　⑧、Setup e2e tests with Nightwatch? (Y/n)；Nightwatch建立端到端的测试？（Y / N）。（选N）

最后一个选项是推荐相关依赖后续使用npm install指令安装，选择Yes, use npm

)

3.2 进入项目，安装并运行：

$ cd my-project
$ cnpm install
$ cnpm run devDONE  Compiled successfully in 4388ms> Listening at http://localhost:8080

3.3 成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：

注意：Vue.js 不支持 IE8 及其以下 IE 版本。

Vue.js安装教程相关推荐

Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）
Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程(超详细) 目录一.安装Node(npm)需要的环境和版本发布信息 (1).Node版本和npm版本关系 (2).支持 ...
Vue.js入学教程
Vue.js是什么 Vue.js 是用于构建交互式的 Web 界面的库. Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API. Vue.js(类似于view)是一 ...
Node.js安装教程（图文版）
[前端之旅]Web基础与开发工具 [前端之旅]手把手教你安装VS Code并附上超实用插件指南 [前端之旅]HTML大总结 [前端之旅]CSS三万字总结 [前端之旅]JavaScript学习笔记 [前 ...
Vue.js入门教程（适合初学者）
Vue.js入门教程 Vue官网网址:Vue.js 中文网 Vue.js Vue.js是渐进式JavaScript 框架,是一套构建用户界面的渐进式框架.也可以说Vue.js 是一个用来构建网页界面的 ...
Vue.js入门教程-组件注册
一.组件创建 1.1 创建步骤创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
【Vue.js安装】
Vue.js 安装直接下载并使用官方网站:https://cn.vuejs.org/ https://cn.vuejs.org/v2/guide/installation.html 选择 &quo ...
vue.js — 安装Webpake创建一个完整的项目并上传至码云
vue.js - 安装Webpake创建一个完整的项目并上传至码云今天总结一下之前几天学习的一整套的创建项目方法: 前提条件:已安装node.js.npm/cnpm最新版本.vue-cli. VS ...
linux安装Node.js（详细）Node.js安装教程
linux安装Node.js(详细)Node.js安装教程文章目录 linux安装Node.js(详细)Node.js安装教程 1:下载 2:解压 3:移动目录 1:创建目录 2:移动目录并重命名 ...
热烈庆祝《Vue.js 实战教程 V2.x（一）基础篇》上线了！
热烈庆祝<Vue.js 实战教程 V2.x(一)基础篇>上线了! 课程简介课程地址:https://edu.csdn.net/course/detail/25641 机构名称:大华软件学 ...

Vue.js安装教程

Vue.js安装教程相关推荐

最新文章

热门文章