1.vue搭建环境

1,安装git

2,安装node.js
安装完成后,在命令行输入node -v 检测是否安装成功

3,安装淘宝镜像 cnpm (因为npm默认拉取国外的,速度慢些,转为cnpm国内会快些)
在命令行中输入  npm install -g cnpm --registry=http://registry.npm.taobao.org   然后等待,没报错表示安装成功
在命令行输入cnpm -v 会输出版本号等信息

4,安装vue-cli
命令行 cnpm install -g @vue/cli
安装完成后使用 vue -V 或者 vue --version 查看版本是否正确

全局安装nrm包,nrm是npm源管理器
命令行 npm i -g nrm

命令行 使用 nrm test 检测镜像到你本地的速度

命令行 nrm use taobao 选择一个速度快的,切换过去,这里是切换到taobao源

如果要运行某个项目,项目文件夹打开,按住shift键,空白处鼠标右键,选择在此处打开命令窗口,运行npm i (这个是npm install的缩写)运行这个后,项目文件夹下面会出现node_modules模块,然后命令行运行npm run serve,npm run是npm run-script缩写,npm run 命令名,这个命令名是看package.json里面的scripts定的

除了这个运行方法之外,也可以在vscode工具内运行,首先用vscode打开项目文件夹,然后ctrl+·打开终端,输入npm i(安装所有的依赖包),再输入npm run serve

不管是那种方法,如果已经npm i了,项目里已经有了node_modules  那不用每次都运行npm i  只需要npm run serve就可以了

执行npm run serve启动后,如果把命令窗口或vscode终端终止,那启动的项目就停止了

### Vue 开发环境搭建 Vue 的开发环境依赖于 Node.js,因此需要先安装 Node.js。Node.js 提供了 npm(Node Package Manager)工具,它是 Vue CLI 和其他依赖项的基础[^4]。在安装完成后,可以通过命令行输入 `node -v` 来验证 Node.js 是否正确安装。 创建 Vue 项目通常使用 Vue CLI 工具。Vue CLI 是 Vue 官方提供的命令行工具,用于快速搭建单页面应用的脚手架[^2]。通过 Vue CLI 创建项目有两种方式:命令行方式和 UI 可视化界面方式。命令行方式通过运行 `vue create 项目名` 命令,在当前目录下生成一个以项目名为名称的文件夹,并初始化项目结构[^1]。另一种方式是通过运行 `vue ui` 启动可视化界面,用户可以在界面上选择配置选项来创建项目[^1]。 ### Vue 代码编写方式 Vue 采用模块化开发,单文件组件(`.vue` 文件)是其核心特性之一。每个 `.vue` 文件封装了 HTML、JavaScript 和 CSS 代码,便于组织和复用代码逻辑[^1]。例如,一个简单的 Vue 组件可以这样编写: ```vue <template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: 'HelloWorld', data() { return { msg: 'Welcome to Your Vue.js App' } } } </script> <style scoped> .hello { color: blue; } </style> ``` 上述代码定义了一个名为 `HelloWorld` 的组件,包含模板、脚本和样式部分[^1]。 ### 查看页面内容 Vue 项目属于单页面应用(SPA),通过路由实现页面跳转[^1]。在开发环境中,Vue CLI 提供了本地服务器功能,开发者可以通过运行 `npm run serve` 启动开发服务器,并在浏览器中访问指定地址(通常是 `http://localhost:8080`)来查看页面内容[^2]。此外,Vue DevTools 是一款浏览器插件,可以帮助开发者调试 Vue 应用的状态和组件树。 ### Vue 前后端数据交互方式 Vue 应用与后端进行数据交互时,通常使用 Axios 库发送 HTTP 请求。Axios 是一个基于 Promise 的 HTTP 客户端,支持跨域请求[^3]。以下是一个使用 Axios 获取数据的示例: ```javascript const axios = require('axios'); axios.get('/api/data') .then(response => { console.log(response.data); }) .catch(error => { console.error('There was an error!', error); }); ``` 在开发环境中,可以通过配置代理解决跨域问题。例如,在 `config/index.js` 文件中添加如下配置: ```javascript module.exports = { dev: { proxyTable: { '/api': { target: 'http://192.168.137.1:8081', changeOrigin: true, pathRewrite: { '^/api': '' } } } } }; ``` 上述配置将 `/api` 路径的请求代理到目标服务器,从而避免跨域问题[^3]。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值