vue2 入门

来源:互联网 发布:radon变换算法 编辑:程序博客网 时间:2024/06/05 17:32

提到vue就要说下vue-cli,vue-cli是官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。
生活中常见的脚手架就是盖房子的时候搭建在墙体上用于工人站立工作的区域,它能帮助工人快速的搭建房子。
vue-cli就是起到这样的作用,但是你也可以不用(如果你的项目足够简单)。

1.安装node
首先要安装 node.js环境,可以到中文官网http://nodejs.cn下载安装包。
解压傻瓜式安装,安装完成后,window+r 输入cmd调出命令行工具,输入node -v 和 npm -v,如果能显示出版本号,就说明安装成功。(npm是node的包管理工具,管理node包,包括:安装、卸载、更新、查看、搜索、发布等,是随着node一起安装的)

2.vue-cli安装
安装好了 node,我们全局安装 vue-cli(如果之前有安装过不需要再次安装)

npm install -g vue-cli

npm安装比较慢行业内一般使用淘宝镜像 cnpm来安装,首先要安装cnpm

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

失败的话,使用 npm cache clean 清理缓存,然后再重新安装
安装好了使用 cnpm -v查看是否安装成功
这里写图片描述

然后使用 cnpm 安装 vue-cli

cnpm install -g vue-cli

使用vue -V (注意 V 大写)查看是否安装成功
这里写图片描述

如果报错 ,可能是 npm 版本过低, npm install -g npm 更新npm版本

3.生成项目
通过命令行工具进入到自己的项目目录,然后输入:

vue init webpack Vue-Project

webpack 是模板名称,Vue-Project是你自己起的项目名称,执行后会出现个配置页面(项目名称啊,项目描述啊,什么插件是否使用啊,一路回车就好),配置完成后,在当前目录生成一个以你自己起的项目名称命名的项目文件夹,然后进入项目目录(cd Vue-Project),安装依赖cnpm install(根据package.json文件安装需要的插件),会生成一个node_modules文件夹。

然后启动项目:

cnpm install

注意事项:
vue2.5.2

最新的vue启动后不会弹出浏览器

npm run build后找不到css和js,webpack.prod.conf.js 中output添加参数publicPath:’./’

入门demo

github 地址:点击