准备开发环境与工具(vscode、git、node、npm、yarn)

vscode：安装插件：

  1. vetur
  2. prettier

根目录下创建.prettierrc:

1
2
3
4
{
    "singleQuote":true,    //默认单引号
    "trailingComma":"all"
}

安装 vue
npm install @vue/cli –global

用 Vue Cli 创建一个 Vue 项目

1
vue create cxn-vue

选择 Manually select features，表示自己选要用的功能，空格选中，选完回车，然后选择 3.X 版本。

提示项目：

  1. use class-style component syntax?(是否使用 class 类型的组件)：n
  2. use babel alongside Typescript?(是否让 babel 和 typescript 一块用)：n
  3. use history mode for router?(是否使用 history 模式的路由)：y
  4. pick a linter / formatter config(检查代码的工具的配置)：默认
  5. pick additional lint features(什么时候执行 lint)：lint on save
  6. where do you prefer placing config for babel,eslint,etc.?(这些工具的配置放哪里)：in dedicated config files(单独放在配置文件里)
  7. save this as a preset for future projects(是否要保存上面的这些预设)：n

这样 vue-cli 会自动帮我们创建这个项目，并安装所有依赖

运行 vue 项目：

1
npm run serve

这里解决一个 mac 系统的报错：Cannot find module ‘vue-loader-v16/package.json’ ，重新安装一下这个模块 , npm i –save-dev vue-loader-v16

了解 vue 项目结构

node_modules：安装的包都会放在这里。
public：公开的资源。
src：开发目录。
.browserslistrc：可以在这个文件里说明项目支持的浏览器，项目里的一些工具会根据这个文件的配置信息去做出响应的反应。
.eslintrc.js：eslint 的配置文件，可以在这里配置代码检查的一些规则。
.gitignore：源代码管理忽略配置
.package：描述项目定义的一些命令，还有项目的依赖。
.tsconfig.json：typescript 的配置文件。

了解 Vue 应用的结构

src 目录：
assets：静态资源文件。
components：单文件组件
router：路由
views：vue 里的组件
App.vue：主组件，创建应用的时候要告诉 vue 应用的主组件是谁
main.ts：入口文件。

了解 Vue 应用的组件

组件就是应用里的一个页面，或者页面里的一块界面，组件可以组合在一起使用。组件分为三个区域：template 是组件的模板，用 html 来设计组件界面的结构。style 就是组件的样式，也可以把样式放在样式表里，在 style 里使用 import 导入。脚本可以放在 script 里面。

了解应用的 store

state：应用里需要用到的数据。
mutations：设置 state 用的一些方法。
actions：获取数据用的方法。可以定义一些方法，执行的时候获取到数据，得到数据后可以在 actions 里面去执行 mutations 来设置 state。

了解如何部署应用

vue 中的代码需要编译一下才能在浏览器中运行。package.json 中定义了一些命令。serve可以帮我们创建一个 web 服务器，会实时编译应用。如果已经完成了开发，准备把应用部署到服务器上，要做的就是在服务器上搭建一个 web 服务器，然后编译一下 vue 应用，再把编译好的应用放在这台 web 服务器上就行了。build可以帮我们编译应用，编译完成后会放在 dist 目录中，要部署的就是这个 dist 目录。可以在服务器上安装一个 nginx，配置一台服务器，再把 dist 目录上传到 web 服务器上。

部署流程示范：

  1. 项目主机名指向服务器
  2. 登录服务器：
1
ssh root@服务器ip(xx.xxx.xx.xx)
  1. 进入根目录，给要部署的应用创建一个目录
1
2
cd /mnt
mkdir vue-demo
  1. 将编译后的应用放在这个目录下面。
    切换到项目下面，使用 scp 这个命令，把本地文件或目录复制到远程服务器上，-r 表示要复制的是目录。
1
scp -r dist root@服务器ip和位置(xx.xxx.xx.xx:/mnt/vue-demo)
  1. 查看远程服务器是否复制成功，切换到服务器的终端标签：
1
ls vue-demo/dist
  1. 配置 nginx 服务器(contOS)，先安装 nginx
1
2
3
4
dnf install nginx
systemctl start nginx //启动nginx
cd /etc/nginx/conf.d  //进入nginx配置目录
vi vue-demo.ninghao.net.conf           //创建配置文件，按小i进入编辑模式
1
2
3
4
5
6
7
8
9
10
server{
    listen 80;          //端口
    server_name vue-demo.ninghao.net   //服务器名字，指向服务器ip

    location / {
        root /mnt/vue-demo/dist;  //设置根目录
        index index.html;  //默认要打开的东西
        try_files $uri $uri/ /index.html
    }
}

esc，:wq

  1. 测试 nginx 配置
1
nginx -t
  1. 让配置生效，重载服务
1
systemctl reload nginx
  1. 打开浏览器，访问一下 vue-demo.ninghao.net 就可以看见项目页面了。