vue组件编程——创建项目

使用 vue-cli 创建模板项目

  首先，我们学习，如何创建一个 Vue 项目，首先需要安装 node，具体过程这里就不累述；新版的 node 已经集成了 npm；我们可以使用 npm 安装相关的插件

# 1. 安装 vue-cli
npm install -g vue-cli
# 2. 创建项目
vue init webpack vue_demo
# 3. 启动项目
cd vue_demo
npm install
npm run dev

  创建项目过程中，会提示下载相关的插件；npm 默认镜像源下载速度回比较慢，可以安装 cnpm 修改镜像源为淘宝的地址，下载速度会快很多。

模板目录

|-- build : webpack 相关的配置文件夹(基本不需要修改)
|-- dev-server.js : 通过 express 启动后台服务器
|-- config: webpack 相关的配置文件夹(基本不需要修改)
|-- index.js: 指定的后台服务的端口号和静态资源文件夹
|-- node_modules
|-- src : 源码文件夹
|-- components: vue 组件及其相关资源文件夹
|-- App.vue: 应用根主组件
|-- main.js: 应用入口 js
|-- static: 静态资源文件夹
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 检查忽略的配置
|-- .eslintrc.js: eslint 检查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主页面文件
|-- package.json: 应用包配置文件
|-- README.md: 应用描述说明的 readme 文件

vue-cli 3.x

  上边的方式，使用 vue-cli 2.x 版本，目前 vue-cli 已经升级到了 3.x 版本，安装方式：

// 卸载 2.x 
npm uninstall -g vue-cli
// 安装 3.x
npm install -g @vue/cli
// 兼容 2.x 的模板
npm install -g @vue/cli-init

创建项目：

vue create vue_demo
cd vue_demo
npm run serve

3.x 以后的创建的项目结构会有所不同：

|-- node_modules
|-- public: 静态资源文件夹
|-- src : 源码文件夹
|-- components: vue 组件及其相关资源文件夹
|-- App.vue: 应用根主组件
|-- main.js: 应用入口 js
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 检查忽略的配置
|-- .eslintrc.js: eslint 检查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- package.json: 应用包配置文件
|-- README.md: 应用描述说明的 readme 文件

  可以看到目录，webpack 相关的目录不见了。因为 vue-cli 3.0 后，集成了 webpack 的相关部分；可以参考：https://cli.vuejs.org/zh/guide/

项目打包发布

• 打包命令：

  npm run build；打包之后，产生一个 dist 目录，但是还是需要启动一个 HTTP 服务器才能够访问。

• 使用静态服务器工具包：

  npm install -g serve

  serve dist