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

发表于 2020-10-03 更新于 2023-09-23 阅读次数：

前言

使用脚手架开发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

项目结构

在builde/webpack.dev.conf.js文件内定义index.html
在项目根目录的index.html文件定义了挂在点
index.html文件会自动加载src/mail.js文件
src/mail.js导入vue.js，并创建了Vue对象，引入了根组件App（src/App.vue）
网页内容写在自定义组件内，组件的存放位置src/components/
.vue文件中有三部分内容

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

静态资源文件放在src/assets
组件在页面中最终就是一个标签
定义路由的文件放在src/router/index.js

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

根据路由访问自定义组件

完成

0%