Vue 学习笔记 -- 项目搭建

目前只是一个前端小白， 之前也只是工作需要粗略接触过AngularJS，对于前端框架的认知只是做数据绑定和模块化组件。用AngularJS写的代码也不过就是往HTML里添加css， 添加业务逻辑，项目结构就是这样(历史遗留项目)

MyProject/ common/ css/ i18n/ js/ index.html

因为周围也没有这方面的前辈可以学习，只能这样闭门造车，但是总觉着这样写的代码并不够elegant，直到有一天，偶然看到了一份Vue的项目代码，看到项目结构的时候，我就觉得这TM才是项目该有的样子, 学就完了！！！




vue 需要 python vue+python_python学习笔记--皮大庆


学习之前，首先就是要搭建环境了。。。

Node.js

之前写的前端是没有用Node.js的， 引入Node.js可以让前端的项目更工程化，何况还有npm这么好的生态，为何不用呢

Package.json

首先，Node.js的项目遵循着模块化的原则， 模块是一个库/框架，同样也是一个Node.js的项目。当创建了一个Node.js项目时，也就相当于创建了一个模块。而package.json就是这个模块的描述文件。它定义了项目的一些基本属性和所有依赖模块的属性。

最基本的package.json 可以通过npm init来创建，就相当于创建了一个Node.js的项目


vue 需要 python vue+python_python学习笔记--皮大庆_02


一般来说，package.json中还包含dependencies和devDependencies两个属性，用于记录生产和开发环境所依赖的模块的列表， 这些模块会被安装在./node_module目录下

npm 用法

  • 安装模块 本地安装 npm install 全局安装 npm install -g 特定版本 npm install @5.2 记录到dependencies npm install --save or -S 记录到devDependencies npm install --save-dev or -D
  • 安装当前目录下package.json中记录的模块 安装所有 npm install 安装dependenciesnpm install --production
  • 卸载模块 卸载 npm uninstall 卸载同时删除记录 npm uninstall -S or -D

使用Vue CLI安装VUE

官网是这么描述的:
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统, 提供这个这个，那个那个的功能，咱也看的不是很懂，只关心怎么先创建一个Hello Word的项目

  • 安装Vue CLI npm install -g @vue/cli-init
  • 创建一个新项目 vvue init webpack hello-word


vue 需要 python vue+python_ci_03

等待安装所需的所有依赖... 有点久，去喝杯茶吧切换到项目目录，运行项目 npm run dev打开浏览器， 访问http://localhost:8080 大功告成