电子商务网站建站目的,php做网站需要的技术,企业网站软件,广州网站建设开发设计工程环境配置
1.安装nodejs
这里我已经安装过了#xff0c;只需要打开链接Node.js — Run JavaScript Everywhere直接下载nodejs#xff0c;安装直接一直下一步下一步
安装完成之后我们来使用电脑的命令行窗口检查一下版本 查看npm源 这里npm源的地址是淘宝的源#xff0…工程环境配置
1.安装nodejs
这里我已经安装过了只需要打开链接Node.js — Run JavaScript Everywhere直接下载nodejs安装直接一直下一步下一步
安装完成之后我们来使用电脑的命令行窗口检查一下版本 查看npm源 这里npm源的地址是淘宝的源不是官方源因为我之前已经改了当我们获取源数据时会从外国的源里面获取这里我们更换一下获取源的位置 这里我们将获取源数据的位置更改了 这里我们也可以安装其它的包管理器 比如yarn和pnpm
npm install yarn -g
npm install pnpm -g
检测是否安装成功
pnpm -v
yarn -v 创建脚手架 创建脚手架其实就是创建一个项目文件但是这个项目文件已经为我们添加了很多代码所以我们就不需要去写直接拿来用就可以了
选择一个存放脚手架文件的位置
这里我直接选择桌面然后已终端的形式打开这个文件
执行命令
npm create vuelatest
会安装并执行create-vue 然后命令行会问我们这个项目要取什么名字需不需要什么功能这里的功能我们全都选择否
我们会得到一个文件我们来用终端来打开这个文件
npm i
用来安装vue的模块依赖后续指令需要它来实现
npm run dev
启动项目启动完了项目终端会给我们一个链接这个链接对应的地址就是本地服务器的网页
让我们打开终端给我们的链接 这是vue给我们的初始页面
这样很多东西就不需要我们自己去配置直接下载到本地直接用就可以了这种东西我们称为脚手架
认识脚手架目录 node_modules里面有很多我们环境需要使用到的包不如vue包这样我们就不需要到官网去获取vue的数据直接安装在本地直接拿来用就可以了
package.json用来管理项目的文件
src/main.js是整个项目打包的入口
App.vue是vue代码的入口
index.html是项目入口网页
src下的所有代码都会被vite打包成css/js/html交给index.html然后呈现在观众眼前
分析脚手架中三个入口级代码 三个入口文件分别是main.jsApp.vueindex.html main.js负责将App.vue的代码整合起来创建应用App.vue负责根层的组件index.html负责将main.js打包形成的应用在网页中展示出来
Vue单文件
Vue的文件由三个部分组成分别是HTMLCSSJS我们来看Vue文件的简化版
script setup
//数据...
/scripttemplate
!-- 数据.. --
/templatestyle scoped
/* 数据 */
/style
scriptJStemplateHTMLstyleCSS
这里的scoped能让style保证修饰template
清理目录 为了便于后于的开发我们将脚手架默认给我们的数据删除分别是assets和component还有Vue里面的初三大框架之外的代码 现在这个项目里的代码文件才是项目主体 代码相应练习
script setup
import { ref,reactive } from vue
let strref(hello,world)
let objreactive({num:69,str1:ganchuhao,grade:60
})
function func() {return 100
}
/script
templatep{{ str }}/pp我是{{obj.str1}}学号是{{ obj.num}}/pp我是{{obj.str1}}学号是{{ obj.num200}}/pp成绩{{ obj.grade60?及格:不及格 }}/ppfunc的返回值是{{ func() }}/ppSTR的单词有{{ str.split( ).length }}个单词/p/template
style scoped
/style
演示结果 快速生成基础代码
vbase
