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效果如下：