安装Node.js
关于Node.js
Node.js是一个基于 Chrome V8 引擎 的异步驱动的 JavaScript 运行时
HTTP 是 Node.js 中的一等公民。它设计的是流式和低延迟。这使得 Node.js 非常适合于 web 库或框架的基础。(了解更多)
安装
根据自己的操作系统选择并下载对应的安装包,然后点击安装包即可安装。
下载地址:下载 | Node.js
更多安装方式:通过包管理器安装 Node.js | Node.js
Node.js默认自带有一个包管理工具npm,通过npm可以查找、安装、共享、分发代码以及管理项目依赖关系。
还有个包管理工具叫yarn,号称快速(缓存已经下载的包、并行操作)、可靠(使用格式详尽而又简洁的 lockfile文件 和确定性算法来安装依赖)、安全(执行前校验其完整性),选用哪个,根据自己的需要进行选择(更多关于yarn的信息:Yarn 中文文档)。
yarn的安装:
- windows,下载mis文件安装:https://classic.yarnpkg.com/zh-Hans/docs/install#windows-stable)
- macOS,通过brew安装:brew install yarn
安装Vue CLI
关于Vue CLI
摘自官网:
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:
- 通过
@vue/cli
搭建交互式的项目脚手架。 - 通过
@vue/cli
+@vue/cli-service-global
快速开始零配置原型开发。 - 一个运行时依赖 (
@vue/cli-service
),该依赖: - 可升级;
- 基于 webpack 构建,并带有合理的默认配置;
- 可以通过项目内的配置文件进行配置;
- 可以通过插件进行扩展。
- 一个丰富的官方插件集合,集成了前端生态中最好的工具。
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。
更多关于Vue CLI内容:介绍 | Vue CLI
安装
安装命令(-g或global表示全局安装):
npm install -g @vue/cli
# OR
yarn global add @vue/cli
Vue CLI安装完成,就可以在命令行执行vue命令了。
localhost:demo me$ vue -V
@vue/cli 4.3.1
创建项目
命令
vue create [options] <app-name>
相关选项:
options: -p, --preset <presetName> 忽略提示符并使用已保存的或远程的预设选项 -d, --default 忽略提示符并使用默认预设选项 -i, --inlinePreset <json> 忽略提示符并使用内联的 JSON 字符串预设选项 -m, --packageManager <command> 在安装依赖时使用指定的 npm 客户端 -r, --registry <url> 在安装依赖时使用指定的 npm registry -g, --git [message] 强制 / 跳过 git 初始化,并可选的指定初始化提交信息 -n, --no-git 跳过 git 初始化 -f, --force 覆写目标目录可能存在的配置 -c, --clone 使用 git clone 获取远程预设选项 -x, --proxy 使用指定的代理创建项目 -b, --bare 创建项目时省略默认组件中的新手指导信息 -h, --help 输出使用帮助信息
示例
执行命令:vue create vue-demo
localhost:demo me$ vue create vue-demo
Vue CLI v4.3.1
? Please pick a preset: default (babel, eslint)
Vue CLI v4.3.1
✨ Creating project in /opt/demo/vue-demo.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
yarn install v1.19.1
info No lockfile found.
[1/4] 🔍 Resolving packages...
success Saved lockfile.
✨ Done in 24.82s.
🚀 Invoking generators...
📦 Installing additional dependencies...
yarn install v1.19.1
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
✨ Done in 4.81s.
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project vue-demo.
👉 Get started with the following commands:
$ cd vue-demo
$ yarn serve
vue-demo项目结构
运行项目
安装依赖
如果在package.json中配置的依赖没有安装,进入Vue项目的目录,执行yarn install命令安装依赖。
localhost:vue-demo me$ yarn install
yarn install v1.19.1
[1/4] 🔍 Resolving packages...
success Already up-to-date.
✨ Done in 0.46s.
代码审查
运行前,可以执行yarn lint命令审查代码,修正错误。
localhost:vue-demo me$ yarn lint
yarn run v1.19.1
$ vue-cli-service lint
DONE No lint errors found!
✨ Done in 1.20s.
编译打包
public目录下的文件保持原样,src下的文件会被编译、压缩、打包,默认输出目录为dist。dist目录下的文件可以直接部署到web服务器上,如nginx。
命令:yarn build
localhost:vue-demo me$ yarn build
yarn run v1.19.1
$ vue-cli-service build
⠹ Building for production...
DONE Compiled successfully in 4876ms 下午4:11:37
File Size Gzipped
dist/js/chunk-vendors.f50f9912.js 89.18 KiB 31.94 KiB
dist/js/app.d1d050a0.js 4.62 KiB 1.64 KiB
dist/css/app.fb0c6e1c.css 0.33 KiB 0.23 KiB
Images and other types of assets omitted.
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
✨ Done in 8.77s.
直接运行
命令:yarn serve
localhost:vue-demo me$ yarn serve
yarn run v1.19.1
$ vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
DONE Compiled successfully in 1319ms 下午4:18:44
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.80:8080/
Note that the development build is not optimized.
To create a production build, run yarn build.
package.json
项目元信息配置文件。
vue.config.js
编译、打包信息配置,用于覆盖默认的配置,可选。vue.config.js和package.js同级目录,会被@vue/cli-serve自动加载。
Vue CLI 3之后不会自动创建该文件,如有需要手动创建(更多配置:配置参考 | Vue CLI)。
下面是一个示例。
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
// vue.config.js
module.exports = {
// 部署应用包时的基本URL,从 Vue CLI 3.3新增(替换baseUrl)
publicPath: '/',
// 打包文件输出目录 构建时传入 --no-clean 可关闭该行为
outputDir: 'dist',
// 打包文件时静态资源 (js、css、img、fonts)输出目录 (相对于 outputDir目录)
assetsDir: '',
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
indexPath: 'index.html',
// 默认在生成的静态资源文件名中包含hash值以控制缓存
filenameHashing: true,
// 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
productionSourceMap: false,
// 开发时,每次保存代码时否进行代码审查
lintOnSave: false,
// 页面配置
pages: {
// 入口文件配置
index: {
// page 的入口
entry: './src/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时,
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// 在这个页面中包含的块,默认情况下会包含// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
},
// webpack配置。如果这个值是一个对象,则会通过 webpack-merge 合并到最终的配置中。
// 如果这个值是一个函数,则会接收被解析的配置作为参数。
// 该函数既可以修改配置并不返回任何东西,也可以返回一个被克隆或合并过的配置版本。
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
}else {
// 为开发环境修改配置...
}
},
// 是一个函数,接收一个基于 webpack-chain 的 ChainableConfig 实例。
// 允许对内部的 webpack 配置进行更细粒度的修改
chainWebpack: (config) => {
// 配置别名
config.resolve.alias
.set('@$', resolve('src'))
.set('@api', resolve('src/api'))
.set('@assets', resolve('src/assets'))
.set('@comp', resolve('src/components'))
.set('@views', resolve('src/views'))
.set('@layout', resolve('src/layout'))
.set('@static', resolve('src/static'))
},
// CSS样式配置
css: {
// loader配置,向CSS相关的loader传递选项
loaderOptions: {
less: {
// 这里的选项会传递给 less-loader
modifyVars: {
'primary-color': '#F5222D',
'link-color': '#F5222D',
'border-radius-base': '4px',
},
javascriptEnabled: true,
},
css: {
// 这里的选项会传递给 css-loader
},
}
},
// 开发环境服务器配置
devServer: {
// 设置为0.0.0.0则所有的地址均能访问
host: '0.0.0.0',
// 跳过host检测
disableHostCheck: true,
// 端口
port: 3001,
// 代理
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
}
}
组件调用流程
Vue单文件组件
Vue单组件文件是一个自定义的文件类型,扩展名为.vue ,它用类 HTML 语法描述一个 Vue 组件,每个 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>,
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
width: 100px;
text-align: center;
padding: 50px;
}
</style>