Vue学习(一)之脚手架安装使用
Vue的使用,度娘说的全是要搭建手脚架,如果只是像使用jquery一样引入Vue.js在页面中会怎么样呢?
前段时间这么使用了一次
对于单页面的数据双向绑定功能、事件绑定、钩子函数都是可以正常使用。
但是路由的功能着实不知道该怎么用。
无奈只能去学习脚手架了。
1、安装Node.js:(本人win7系统)
1.1 下载直接安装:https://nodejs.org/en/download/,环境变量会自动配置。
1.2 使用cmd查看是否安装成功:node -v,可以查看版本信息说明安装成功
2、安装webpack(全局安装)
2.1 安装命令:npm install webpack -g
2.2 查看是否安装成功:webpack -v,可以查看版本信息说明安装成功
3、安装Vue脚手架
3.1 安装命令:npm install --global vue-cli,安装时有报错,做如下处理后安装成功
3.2 查看是否安装成功:vue -V(V要大写),可以查看版本信息说明安装成功
4、创建项目
4.1 在cmd中进入项目要存放的位置:vue init webpack codestock(codestock为项目名)
4.2 有各种配置信息需要做,根据自己需要名称、描述等信息想填的填,其他插件想安装就输入yes
4.3 配置完成后执行命令:npm install ,安装项目所需的插件
4.4 启动项目:我已修改过index.js文件中的路由配置,引用了自己的组件
t.vue页面内容如下:
其中<el-row><el-button>标签是我使用了Element-ui插件,使用时首先需要下载
vue install element-ui --save (一定要使用--save不然别人导入你项目后不会自动下载此插件)
在package.json中你可以看到已下载的插件
在main.js中使用element-ui
查看修改端口号的位置:
在cmd进入项目文件夹下,执行npm run dev,启动项目,打开浏览访问localhost:8081效果如下: