前端学习笔记

学习路径

如何搭建 一个 vue 项目？

安装 node 环境

下载 Node.js

$ node -v
v10.15.3

$ npm -v
6.10.0

安装淘宝镜像，提高效率

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
C:\Users\01510886\AppData\Roaming\npm\cnpm -> C:\Users\01510886\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
+cnpm@6.1.0

$ cnpm -v
cnpm@6.1.0 (C:\Users\01510886\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.10.0 (C:\Users\01510886\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@10.15.3 (D:\software\nodejs\node.exe)
npminstall@3.22.1 (C:\Users\01510886\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\01510886\AppData\Roaming\npm
win32 x64 6.1.7601
registry=https://r.npm.taobao.org

搭建 vue 项目环境

安装 vue-cli

$ npm install --global vue-cli

$ vue list
  Available official templates:
  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

创建一个基于 webpack 模板的新项目

$ vue init webpack vue-test

? Project name (vue-test)
? Project name vue-test
? Project description (A Vue.js project)
? Project description A Vue.js project
? Author (raohui <raohui@haier.com>)
? Author raohui <raohui@haier.com>
? Vue build standalone
? Install vue-router? (Y/n) Y
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n
? Use ESLint to lint your code? No
? Set up unit tests (Y/n) n
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n) n
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

   vue-cli · Generated "vue-test".


# Installing project dependencies ...
# ========================

npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated flatten@1.0.2: I wrote this module a very long time ago; you should use something else.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

> core-js@2.6.9 postinstall D:\vue\vue-test\node_modules\core-js
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> uglifyjs-webpack-plugin@0.4.6 postinstall D:\vue\vue-test\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ajv-keywords@3.4.1 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1208 packages from 669 contributors and audited 11766 packages in 196.113s
found 10 vulnerabilities (6 moderate, 4 high)
  run `npm audit fix` to fix them, or `npm audit` for details

# Project initialization finished!
# ========================

To get started:

  cd vue-test
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

tips:
npm install -g npm （升级npm至最新版本）
npm cache clean --force  (出现报错可清除缓存)

启动项目

$ cd vue-test
$ npm run dev

> vue-test@1.0.0 dev D:\vue\vue-test
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 13% building modules 26/33 modules 7 active ...ue-test\src\components\HelloWorld.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting DONE  Compiled successfully in 11954ms14:06:01

 I  Your application is running here: http://localhost:8080

vue 项目目录解析

• build：构建脚本目录

• config：项目配置目录

• node_modules：npm 加载的项目依赖目录

• src：开发目录，基本上要做的事情都集中在这个目录，里面包含几个目录和文件：

  • assets：资源目录，放置一些图片或者公共 js、公共 css，这里的资源会被 webpack 构建

  • components：组件目录，我们写的组件就放在这个目录里面

  • router：前端路由，我们需要配置的路由路径写在 index.js 里面

  • App.vue：根组件

  • main.js：入口 js 文件

• static：静态资源目录，如图片、字体等，不会被 webpack 构建

• index.html：首页入口文件，可以添加一些 meta 信息等

• package.json：npm 包配置文件，定义了项目的 npm 脚本，依赖包等信息

开发 Frist.vue 项目

• components 目录下新建一个 views 目录，并新建组件 First.vue
• router 目录下的 index.js 配置路由路径

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from '@/components/views/First'

Vue.use(Router)

export default new Router({

  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },{
      path: '/first',
      name: 'First',
      component: First
    }
  ]
})

• First.vue 文件 template 写 html，script 写 js，style 写 css

<template>
    <div class="first-app">
        {{msg}}
    </div>
</template>

<script>
export default {
    name: "First",
    data() {
        return {
            msg: "Welcome to FirstApp"
        };
    }
};
</script>

<style>
</style>

• http://localhost:8080/#/first，查看页面效果