本文会详细讲解vue.js的安装与node.js安装使用vue.js,安装文档和步骤会一一提供和讲解。虚心好学,如有欠缺,多多指导。
vue.js项目环境搭建
- vue.js安装
- 一、script 标签 引入使用
- 二、使用 CDN 方法
- 三、node.js安装(推荐使用)
vue.js安装
一、script 标签 引入使用
直接下载并用 script 标签引入
下载网址:https://cn.vuejs.org/v2/guide/installation.html
下载开发版本,
二、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。
Staticfile CDN(国内) :
https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg( 会保持和 npm 发布的最新的版本一致):
https://unpkg.com/vue/dist/vue.js,
cdnjs :
https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
三、node.js安装(推荐使用)
(1)打开Nodejs的官网
https://nodejs.org/en/
进入页面,我们会看到需要下载的版本
选择对应的版本下载即可,建议下载后一个版本,也可以选择下面的Other Downloads下载其他版本和Mac的版本。
(2)下载完成后(安装时可选择安装目录,最好不好装在C盘,以防止影响电脑运存速度)
安装完成后可以先进行下简单的测试安装是否成功了,
测试安装是否成功:
在键盘按下【win+R】键,输入cmd,然后回车进入cmd窗口
node -v 是检测node.js是否安装成功(显示版本号即为安装成功)
npm -v 是检测npm操作管理是否完成(后面配置环境需要用到npm命令配置)
(3)安装镜像文件
在命令行中输入
npm install -g cnpm --registry=http://registry.npm.taobao.org
安装完成后输入cnpm -v检测是否安装成功
(4)安装脚手架
命令行输入
cnpm install -g vue-cli
这里的 -g 是表示全局使用
安装完成后在命令行输入 vue -v 可以查看vue版本
至此,环境已经基本搭建成功。
(5)创建vue项目
在命令行中输入:
vue init webpack hello
这是的 hello 是我创建的项目名,可以根据自己的需求命名,但推荐使用英文命名,不行的话拼音也是可以的,这样可以防止以后不必要的麻烦
创建项目时,会出现如下:
1.项目名称
2.项目描述
3.作者
4.vue构建
5.安装路由插件
6.代码检查工具(建议不安装 如初 N 回车即可)
7.单元测试(建议不安装 如初 N 回车即可)
8.自动安装
以上除了6和7不推荐安装外,其他为必须安装
(6)安装依赖包
项目创建完成后,通过命令行输入
cd 项目名
进入项目,进入项目之后,在命令行输入命令安装依赖包
cnpm install
重新打开路径下的文件夹,我们可以看到文件夹中比之前的文件夹多了一个node_modules文件夹,到此脚手架安装完成。
(7)打开项目
在命令行中输入命令打开项目
npm run dev
一般项目不会自动打开,我们可以手动打开,在输入打开项目命令后,会输出以下页面:
我们可以再浏览器中如输入这个 就可以打开你的项目了。