从零开始使用vue-cli脚手架搭建项目

A Vue.js project

使用 vue-cli 初始化项目

# 打开 cmd 窗口

# 安装 vue （全局安装）
npm install -g vue

# 使用 vue init webpack [项目/目录名] 命令在任意目录下创建项目，例如我的项目就放在 E:\Code\Web 这个目录下
E:\Code\Web> vue init webpack travel
? Project name (my-demo) # 回车
? Project name my-demo
? Project description (A Vue.js project) # 描述 （随便写什么都可以，也可以不写 按回车）
? Project description A Vue.js project
? Author (lvr1997 <lr1997rrrrr@163.com>) # 作者（你的名字） 回车
? Author lvr
? Vue build (Use arrow keys)
> Runtime + Compiler: recommended for most users
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific H
TML) are ONLY allowed in .vue files - render functions are required elsewhere # 回车
? Vue build standalone
? Install vue-router? (Y/n) Y # 是否需要vue路由 输入 Y 回车
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) Y # 是否需要ESLint 输入 Y 回车
? Pick an ESLint preset (Use arrow keys)
> Standard (https://github.com/standard/standard)
  Airbnb (https://github.com/airbnb/javascript)
  none (configure it yourself) # 默认选择即可 回车
? Pick an ESLint preset Standard
? Set up unit tests (Y/n) n # 单元测试  输入 n 回车
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n) n # e2e测试 输入 n 回车
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) (Use arrow keys)
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself # 选择哪种安装方式 npm 或 yarn 或者自定义 ，我们选择 npm 直接按回车即可

# 接下来是执行初始化操作，我们稍等片刻

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

To get started:

  cd my-demo
  npm run dev

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

# 看到以上字样了，说明已经初始化成功了

# 进入到项目目录下
cd travel

# 安装项目所需依赖
npm install

# 启动项目
npm run dev

项目目录结构介绍

进入到项目目录后，我们看到的目录结构可能是这样的：

.
├─ build/                 # 存放 webpack 的配置文件，该目录包含开发服务器和生产Webpack构建的实际配置，一般情况下不需要动这里面的文件
│      
├─ config/                
│      index.js           # 项目的主要配置
│      ...
│      
├─ node_modules/          # 项目依赖包
├─ src/                   # 应用程序源代码目录，我们后期需要实现的功能什么的，都在这里面
│  │  App.vue             # 应用程序的入口组件
│  │  main.js             # 应用程序入口文件
│  │  
│  ├─ assets/             # 存放静态资源（由 webpack 处理）也就是说，我们项目中用到的图片都放在这里
│  │      logo.png
│  │      
│  ├─ components/         # 组件目录
│  │      HelloWorld.vue
│  │      
│  └─ router/             # 路由目录
│         index.js        # 路由的配置文件
│          
└─ static/                # 纯静态资源（直接复制）            
│  .babelrc               # babel 配置文件
│  .editorconfig          #缩进、空格/制表符和编辑器的类似设置
│  .eslintignore          # eslint忽略规则
│  .eslintrc.js           # eslint 配置文件
│  .gitignore             # 使用 git 提交代码时忽略的规则
│  .postcssrc.js          # postcss 配置文件
│  index.html             # index.html 模板文件
│  package-lock.json      
│  package.json           #生成脚本和依赖项
│  README.en.md
│  README.md              # 项目说明
│

main.js

main.js 是我们应用程序启动的入口文件，包括依赖引入，入口组件的实例化，还有一些常规的配置

import Vue from 'vue' // 引入 vue 核心
import App from './App' // 引入 App.vue 入口组件
import router from './router' // 引入路由配置

Vue.config.productionTip = false

/* eslint-disable no-new */
// 入口组件的实例化
new Vue({
  el: '#app',
  router,
  render: h => h(App) //es6写法，是用来创建  html 模板的，然后渲染到指定的节点上

  /**
   * 我们也可以使用传统写法：
   * components: { App },
   * template: '<App/>'
   * /
})

render 类型：(createElement: () => VNode) => VNode

详细：字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。

Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

说明：render是一个方法，自带一个形参createElement，这个参数也是一个方法，是用来创建vue 节点的，也就是html模板的，然后渲染(render)到指定的节点上

vue 单文件组件

我们在 src/components/ 目录下看到了一个叫 HelloWorld.vue 的文件，这个文件就是 vue 中的单文件组件，它由 vue-loader 这个项目依赖项加载解析。

后期我们在实现功能的时候也需要建一些这样的文件。

在项目的根目录下，index.html是我们单页应用程序的模板。在开发和构建期间，Webpack将生成资源，并将这些生成的资源的 URL 自动注入到此模板中以呈现最终的 HTML。

启动项目

# 安装依赖
npm install

# 服务在 localhost:8080 上热启动
npm run dev

# 在浏览器地址栏输入 http://localhost:8080 即可访问项目
server running at http://localhost:8080

# 构建生产
npm run build

【前端学习笔记】- vue篇 - 使用vue-cli构建项目