Vue 学习笔记 -- 项目搭建

Vue 学习笔记 -- 项目搭建

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

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

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

MyProject/
  build/
  config/
  node_modules/
  src/
    assets/
    components/
    router/
    App.vue
    main.js
  static/
  package.json
  package-lock.json
  ...

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

Node.js

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

Package.json

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

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

λ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (test) demo
version: (1.0.0)
description: this is a Node.js demo project
entry point: (index.js)
test command:
git repository:
keywords:
author: Neil
license: (ISC)
About to write to C:\Project\JS\Test\package.json:

{
"name": "demo",
"version": "1.0.0",
"description": "this is a Node.js demo project",
"main": "index.js",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Neil",
"license": "ISC"
}


Is this OK? (yes)

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

npm 用法

• 安装模块
  • 本地安装 npm install <Module Name>
  • 全局安装 npm install -g <Module Name>
  • 特定版本 npm install <Module Name>@5.2
  • 记录到dependencies npm install <Module Name> --save or -S
  • 记录到devDependencies npm install <Module Name> --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 init webpack hello-word

? Project name hello-word
? Project description A Vue.js project
? Author Neil
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "hello-word".


# Installing project dependencies ...

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