Vue.js安装教程
Posted 臻敏科技
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js安装教程相关的知识，希望对你有一定的参考价值。
目的： 记录使用npm安装方式 安装Vue.js的过程，方便参考和借阅
No 1. 安装Node.js （如果电脑上已经安装了npm环境的同学，就不用再次安装，可以跳过此步骤 直接到No.2）
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) npm
vue-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.js
npm 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 vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
# Project initialization finished!
# ========================
To get started:
cd myproject
npm run dev
Documentation 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 dev
DONE Compiled successfully in 4388ms
> Listening at http://localhost:8080
3.3 成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：
注意：Vue.js 不支持 IE8 及其以下 IE 版本。
以上是关于Vue.js安装教程的主要内容，如果未能解决你的问题，请参考以下文章