Vue.JS开发环境搭建
说明:vue是一套构建用户界面的渐进式框架,可通过独立版本的方式直接使用从官网上直接下载 vue.min.js 并用 <script> 标签引入或者通过cdn方法直接引用。本文档只介绍vue.Js的另一种安装方式npm安装,在用vue.js构建大型应用时推荐使用npm安装。此外还有搭建vue脚手架的用于帮助搭建所需的模板框架。
安装node.js
Node.js官网:https://nodejs.org/en/
进入Node.js官网,选择下载并安装Node.js。安装过程只需要点击“下一步”即可,如下图。
验证Node.js是否安装好,在windows下,win+r召唤出运行窗口,输入cmd打开命令行窗口。输入node -v即可得到对应的Node.js版本。
npm包管理器是集成在Node.js中了,所以在安装Node.js的时候就已经自带了npm。
输入npm -v可得到npm的版本。
注意npm的版本需要在3.0.0以上版本,所以,如果npm的版本小于3.0.0,输入以下命令更新npm至最新版本。
npm -g install npm
安装cnpm
由于资源的限制,安装npm依赖包的时候经常失败,建议使用npm的国内镜像cnpm 命令行工具代替默认的npm。
npm 国内镜像 https://npm.taobao.org/
在命令行中输入以下内容等待安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
cpnm全局安装vue-cli
在命令行中运行以下命令然后等待安装
cnpm install -g vue-cli
构建项目
新建项目
在这里我将vue项目建在f盘的vueProjiects文件夹下,利用命令进入此目录。在cmd中输入盘符f:回车即可进入F盘:
输入命令 cd vueProjects跳到此目录下:
在此目录下创建一个基于 webpack 模板的新项目,即在cmd中输入以下命令:
vue init webpack my-vue-project
vue init webpack my-vue-project意思是初始化一个项目,利用的是webpack打包和压缩,此项目命名为my-vue-project。这样,my-vue-project文件夹就自动生成刚刚在指定的目录中,在此过程中,需要输入项目名、描述、作者等。
打开my-vue-project文件夹,项目文件如下:
安装项目依赖
在cmd中,注意需要使用命令先定位到my-vue-project目录下,然后输入命令cnpm install安装项目所需的依赖包资源
cnpm install
可以看到my-vue-project文件夹下多了一个node_modules文件
运行项目
使用命令npm run dev 运行项目
npm run dev
项目运行成功后浏览器会自动打开localhost:8080(端口号若被占用可在config目录下的index.js文件中修改)呈现以下页面:
至此,vue的脚手架工具已经搭建完成,接下来具体项目的开发只需在src目录下进行。
Vue.js项目结构(使用visual studio code 进行vue的开发)
目录/文件 | 说明 |
build | 项目构建(webpack)相关代码 |
config | 配置目录,包括端口号等。我们初学可以使用默认的。 |
node_modules | npm 加载的项目依赖模块 |
src | 这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
|
static | 静态资源目录,如图片、字体等。 |
test | 初始测试目录,可删除 |
.xxxx文件 | 这些是一些配置文件,包括语法配置,git配置等。 |
index.html | 首页入口文件,你可以添加一些 meta 信息或统计代码啥的。 |
package.json | 项目配置文件。 |
README.md | 项目的说明文档,markdown 格式 |
vuejs怎么在服务器部署
通过命令npm run build 把生成的dist文件夹(不要上传文件夹)里的内容上传到http服务器上就可以通过 http来访问了
Vue2.0支持的浏览器
vue.js的使用
参考官方中文api:https://cn.vuejs.org/v2/guide/installation.html