环境搭建
依赖管理
大型项目构建
- 下载node.js对其进行版本管理
- 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 # 全局安装
- 创建项目
# 升级或安装 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
}
]
})
