Vue.js项目初始化与开发环境搭建
Vue.js项目初始化与开发环境搭建
Vue CLI是专为Vue.js设计的完整开发工具链，它基于Node.js环境运行，该环境采用Google V8引擎，使JavaScript代码能够在操作系统层面执行，突破了传统浏览器环境的限制。
Vue应用的核心架构建立在组件化设计之上，页面各部分被拆分为独立组件，通过组合方式构建完整界面。整个应用采用单页面应用(SPA)架构模式。
开发Vue CLI项目时，从创建到最终部署，必须经过编译过程，将源码转换为纯HTML、JavaScript和CSS文件。
官方文档参考：Vue CLI官方指南
开发环境配置
Node.js与包管理工具安装
- 安装Node.js
- 访问官方网站下载安装包：https://nodejs.org/zh-cn/
- 执行标准安装流程
- 安装cnpm（国内镜像加速）
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 安装Vue CLI脚手架
cnpm install -g @vue/cli
- 清理npm缓存
npm cache clean --force
- 验证安装
vue --version
创建新项目
- 命令行方式创建项目
vue create my-project-name
- 图形界面方式创建
vue ui
项目创建时的重要配置：
- 确保在目标目录下执行创建命令
- 选择"Manually select features"自定义配置
- 勾选Router和Vuex插件，其他选项根据需求选择
项目目录结构解析
-
node_modules
-
存放项目依赖的第三方模块
-
分享项目时应排除此目录
-
使用
cnpm install根据package.json自动安装依赖 -
public
-
favicon.ico：网站标签页图标
-
index.html：单页面应用的HTML模板（不建议修改）
-
src（源代码目录）
-
assets：静态资源文件夹
-
图片、CSS、JS等文件
-
components：可复用组件
-
单个Vue组件文件（.vue扩展名）
-
router：路由配置
-
index.js：路由主配置文件
-
store：状态管理
-
index.js：Vuex状态管理配置
-
views：页面级组件
-
各功能页面组件
-
App.vue：根组件
-
main.js：应用入口文件
-
配置文件
-
package.json：项目依赖与脚本配置
-
jsconfig.json：JavaScript配置
-
babel.config.js：Babel转译配置
-
vue.config.js：Vue项目特定配置
基础开发实践
ES6模块导入导出
导入整个模块
import ModuleName from './module/path'
导入特定导出内容
// 导出模块
export default { ... } // 默认导出（仅一次）
export const variable = value // 命名导出（可多次）
// 导入模块
import ModuleName from './module/path' // 默认导入
import { variable1, variable2 } from './module/path' // 命名导入
示例应用：
import MyComponent from "@/components/MyComponent"
// @符号在Vue项目中代表src目录
export default {
name: 'MyPage',
components: {
MyComponent // 注册组件以便在模板中使用
}
}
Vue组件文件结构
Vue组件文件由三个主要部分组成：
<template>
<!-- HTML模板，将被编译为组件的template属性 -->
<div>组件内容</div>
</template>
<script>
// JavaScript逻辑，定义组件行为
export default {
name: "ComponentName",
data() {
return {
// 组件数据
}
}
}
</script>
<style scoped>
/* CSS样式，scoped属性确保样式仅限当前组件 */
</style>
注意：添加scoped属性的style标签会限制样式作用域，防止影响子组件
组件渲染流程
main.js（应用入口）
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
App.vue（根组件）
<template>
<div id="app">
<nav>
<router-link to="/">首页</router-link> |
<router-link to="/about">关于</router-link>
</nav>
<router-view/>
</div>
</template>
页面组件示例
<template>
<div class="page-container">
<h1>页面标题</h1>
<hr>
<custom-component message="来自页面的数据">
<h1 slot="header">自定义内容</h1>
</custom-component>
<hr>
</div>
</template>
<script>
import CustomComponent from "@/components/CustomComponent"
export default {
name: 'PageView',
components: {
CustomComponent
}
}
</script>
子组件示例
<template>
<div>
<slot name="header"></slot>
<div>组件主体内容</div>
<p>接收到的消息：{{ message }}</p>
</div>
</template>
<script>
export default {
name: "CustomComponent",
data() {
return {
componentName: "CustomComponent",
internalData: "内部数据"
}
},
props: ['message']
}
</script>
HTTP请求处理
使用axios发送网络请求：
- 安装axios
npm install axios -S
- 在组件中导入并使用
import axios from 'axios'
// 发送POST请求
axios.post("http://api.example.com/login", {
username: this.username,
password: this.password
}).then(response => {
console.log(response)
// 设置认证令牌
axios.defaults.headers.common['Authorization'] = `Bearer ${response.data.token}`
}).catch(error => {
console.error("请求失败:", error)
})
- 封装axios请求（可选）
// 创建api服务文件
import axios from 'axios'
const apiClient = axios.create({
baseURL: 'http://api.example.com',
headers: {
'Content-Type': 'application/json'
}
})
export default {
login(credentials) {
return apiClient.post('/login', credentials)
},
getProtectedData() {
return apiClient.get('/protected-data')
}
}
