【笔记】使用脚手架开发Vue项目

发表于 更新于 阅读次数：

前言

使用脚手架开发Vue项目

环境部署

安装vue脚手架

1
npm install vue-cli -g

查看版本号

  • 查看版本号，验证是否安装成功
1
vue --version

生成项目

项目名

1
vue init webpack <name>

配置：

项目名：直接回车，默认为刚刚指定的项目名
项目描述：直接回车，默认为A Vue.js project
作者信息：直接回车，默认为git的作者信息
Vue构建：直接回车，默认为standalone
解决路由问题：输入Y，回车
Vue语法警告：输入n，回车
单元测试：输入n，回车
e2e测试：输入n，回车
构建工具：直接回车，默认为NPM

启动项目

  • 在开发环境启动

<name>：项目名

1
2
cd <name>
npm run dev

完成构建

  • 根据提示的域名访问项目

打包发布

1
npm run build

项目结构

  1. 在builde/webpack.dev.conf.js文件内定义index.html

  2. 在项目根目录的index.html文件定义了挂在点

  3. index.html文件会自动加载src/mail.js文件

  4. src/mail.js导入vue.js，并创建了Vue对象，引入了根组件App（src/App.vue）

  5. 网页内容写在自定义组件内，组件的存放位置src/components/

  6. .vue文件中有三部分内容

<template></template>：模版，实际上就是一段html代码
<script></script>：js脚本
<style></style>：样式

  1. 静态资源文件放在src/assets

  2. 组件在页面中最终就是一个标签

  3. 定义路由的文件放在src/router/index.js

path：定义访问路径
name：定义组件的名称
component：定义组件文件名（存放在src/components/目录下），不含后缀名

  1. 根据路由访问自定义组件

完成