season0. vue项目初始化及发布

环境搭建

依赖管理

大型项目构建

1. 下载node.js对其进行版本管理
2. npm 常规命令:

• npm安装检测：

npm -v

• 使用淘宝镜像的命令：

cnpm install npm -g

• 安装/卸载模块：

# 安装模块
npm install <Module Name>
# 卸载模块
npm uninstall <Module Name>
# 更新模块
npm update <Module Name>
# 搜索模块
npm search <Module Name>

安装好之后，包就放在了工程目录下的 node_modules 目录中，因此在代码中只需要通过 require('<Module Name>') 的方式就好，无需指定第三方包路径。

var express = require('express');

• 全局安装

npm install express -g   # 全局安装

1. 创建项目

# 升级或安装 cnpm
npm install cnpm -g

# 最新稳定版
cnpm install vue
# 安装live-server
npm install live-server -g
# 全局安装 vue-cli
cnpm install --global vue-cli

小型项目构建

页面中直接引用：

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

---

运行方法

• live-server使用
  用npm进行全局安装

cd my-project
cnpm install
live-server

vue 项目的创建

# 创建一个基于 webpack 模板的新项目，这里需要进行一些配置，默认回车即可
vue init webpack my-project

vue-cli 项目的发布

npm run build

输入命令后，vue-cli会自动进行项目发布打包。

• 在执行完npm run build命令后，在你的项目根目录生成了dist文件夹，这个文件夹里边就是我们要传到服务器上的文件，其中的目录包括：
  • index.html主页文件:因为我们开发的是单页web应用，所以说一般只有一个html文件。
  • static 静态资源文件夹：里边js、CSS和一些图片。

vue-cli 项目目录

• /src/main.js 是整个项目的入口文件，该文件中引入了App.vue文件。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

• App.vue文件

  • <template></template>标签包裹的内容<router-view>标签说明使用了路由机制

• router/index.js 路由文件

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
  ]
})