Vue系列(二):Vue环境搭建与简单入门

  重构的项目前端由原来的 JSP 改为 Vue 框架来实现,后台对应的 Controller 修改为 Restful 接口。

  使用 Vue 框架来实现前端的业务,前后端分离模式,充分发挥前端的优势,熟悉前端开发工具(node,webpack,npm),体验前端开发过程,走向全栈不归路。

环境搭建

  1. 下载 Node.js,可下载压缩版,解压缩到本地

  2. 配置 Node 本地环境变量
    系统属性->高级系统设置->环境变量->系统变量->新建;
    新建变量为 NODE_HOME,值为Node的安装路径(如 D:\Program Files\node-v10.8.0-win-x64); 在Path里添加:%NODE_HOME%

  3. 查看Node版本

    node -v
    v10.8.0

  4. Node自带了 NPM 依赖管理工具, 查看Npm版本

    npm -v
    6.2.0

  5. 设置 NPM 淘宝镜像:http://npm.taobao.org/

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

  6. 本地安装 webpack 打包工具

    npm install –save-dev webpack
    npm install –save-dev webpack-cli
    webpack -v //查看版本
    4.17.2
    webpack-cli -v //查看版本
    3.1.0

  7. 安装vue:https://cli.vuejs.org/zh/guide/installation.html

    npm install -g @vue/cli
    vue –version | -V
    3.0.1

  8. 安装原型开发依赖(可省略),cli-service是全局依赖

    npm install -g @vue/cli-service-global

  9. 安装@vue/cli-service,否则项目启动会报错

    npm install -g @vue/cli-service

  10. 安装依赖 vue-template-compiler

    cnpm install vue-template-compiler

  11. 创建项目

    vue create hello-world
    显示 Successfully created project hello-world. 表示项目创建成功

  12. 进入项目目录

    cd hello-world

  13. 启动项目

    npm run serve (构建开发环境,未做优化)
    npm run build (构建生产环境)
    启动项目会先进行编译,显示 DONE Compiled successfully in 17596ms 表示项目编译启动成功,显示项目运行地址:
    App running at:

  1. 访问项目,在浏览器输入访问地址
    在浏览器显示 Vue 默认首页。

项目结构

初始的项目上结构如下,也可以进行修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
├── node_modules				// 项目依赖包文件夹
├── public // 公共目录
│ ├── index.html // 项目首页文件
├── src // 开发目录
│ ├── assets // 存放静态资源文件, 如图片
│ ├── components // 存放组件文件
│ ├── views // 存放页面视图,是一些 vue 的 template 模板文件
│ ├── App.vue // 应用入口文件
│ ├── main.js // 项目主配置文件
│ ├── router.js // 路由配置文件
│ ├── store.js // 状态管理配置文件
├── tests // 测试目录
├── package.json // 项目依赖包配置文件
├── package-lock.json // npm5 新增文件,优化性能
├── README.md // 项目说明文档

Vue简单入门

  1. 参考官网的单示例在html页面演示
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <!DOCTYPE html>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>

    <body>
    <!-- 这是 view -->
    <div id="app">
    {{ message }}
    </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
    // 这是Model
    var exampleData = {
    message: 'Hello World!'
    }

    // 创建一个 Vue 实例或 "ViewModel",它连接 View 与 Model
    new Vue({
      //绑定的DOM元素(挂载)
    el: '#app',
      //绑定的数据对象
    data: exampleData
    })
    </script>
    </html>
    使用浏览器打开,在输入框中输入内容,下面 div 内容响应变化,这是监听到页面状态变化同步到数据的改变;
    打开调试窗口,在 Console 中输入: exampleData.message = “天天向上”, 输入框内容随之改变, 这是数据驱动DOM节点更新。

Vue系列(二):Vue环境搭建与简单入门

http://blog.gxitsky.com/2018/09/12/Vue-2-getting-start/

作者

光星

发布于

2018-09-12

更新于

2022-07-07

许可协议

评论