网站建设那些公司比较好,我们的网站,在线网站建设哪家便宜,厦门首屈一指的网站建设公司一、vue项目搭建#xff08;如遇问题依据不同情况动态解决搭建过程中的问题#xff09;
VUE官网链接:https://cli.vuejs.org/. node.js下载链接: https://nodejs.cn/download/ 在PATH中配置node的环境变量#xff0c;node自带npm和npx
C:\workSpacenode -v
v18.17.0
C…一、vue项目搭建如遇问题依据不同情况动态解决搭建过程中的问题
VUE官网链接:https://cli.vuejs.org/. node.js下载链接: https://nodejs.cn/download/ 在PATH中配置node的环境变量node自带npm和npx
C:\workSpacenode -v
v18.17.0
C:\workSpacenpm -v
9.6.7
C:\workSpacenpx -v
9.6.7
# 生成默认的package.json文件
C:\workSpacenpm init -y
Wrote to C:\workSpace\package.json:
# 脚手架搭建 可指定版本若cnpm i -D vue/cli4.5.15
cnpm i -D vue/cli
# 查看版本 不指定版本为2.9.6
npx vue -V
# 创建项目project项目名称选择vue2 or vue3
npx vue create project
# 安装yarn
npm install -g yarn
# 进入“project”目录下执行以下命令启动本地开发服务器的命令
yarn serve可以vue.config.js修改启动后自动浏览器打开
const { defineConfig } require(vue/cli-service)
module.exports defineConfig({transpileDependencies: true,devServer:{open: true,host: localhost}
})Vue图形界面,可以在界面创建项目
npx vue uiStarting GUI...Ready on http://localhost:8000仪表盘可以添加插件
1.1 Vue-CLI2新建项目对比
在命令窗口输入Vue-CLI2创建项目的命令
vue init webpack project
#提示下面的配置参数信息
? Project name (vuecli2test)输入项目名字之前init中的那个只是文件夹的名字不是项目名字
? Project description (^ Vue.js project)项目描述默认值就是()里面的内容
? Author (coderYJ xxxxx)作者默认值是()里面的值默认是git账号
? Vue build (Use arrow keys)选择Vue Build环境是选择Rumtime Compiler方式还是选择Runtime-only这里选择only模式Runtime Compiler: xxxxxxxxRuntime-only:xxxxxxxxxx
? Install vue-router是否安装路由 n
? Use ESLint to lint your code 是否对ES代码进行限制即编写是否规范例如当你在结尾添加一个“,”时就会导致编译失败总之一句话ESLint代码规范能让你怀疑人生并且针对JS的ESLint规范会与其他语言的规范差别很大对于后台全栈开发者来说短时间内很难适应
? Pick an ESLint preset(Use arrow keys)当你选择Y的时候这个选项让你选择哪个规范去遵循
Standard标准规范
Airbnb爱彼迎公司规范
none自定义规范
? Set up unit tests是否集成单元测试
? Setup e2e tests with Nightwatch是否依赖于Nightwatch来实现端end到端end的自动化测试n
? Should we run npm install for you after the project has been created?你的项目是使用npm工具来管理还是yarn工具来管理还是自己直接来管理
yes,use npm
yes,use yarn
no,i will handle that myself1.2 全局安装 or 本地安装
全局安装是将Vue.js安装到全局环境中这意味着我们不需要在每个项目中都安装Vue.js。只要我们安装了一次Vue.js我们就可以在任何地方使用它。
而本地安装则将Vue.js安装到当前项目的本地环境中这意味着我们需要在每个项目中单独安装Vue.js。这种方式的缺点是每个项目都需要安装Vue.js这会使项目的体积变得很大。 全局安装vue-cli 2.9.6和项目创建 # 安装webpack
npm i webpack -g# 安装脚手架npm i vue-cli -g#创建项目vue init webpack demo全局安装vue-cli 4.5.15和项目创建 # 用npm安装脚手架
npm install -g vue/cli # OR# 用yarn 安装脚手架
yarn global add vue/cli#创建项目vue ui # OR#创建项目vue create project1.3 批注
Node.js 用途
构建 Web 应用程序: Node.js 可以轻松地构建基于 HTTP 协议的服务器处理 HTTP 请求和响应可以用于开发 Web 应用程序如社交网络、实时聊天应用程序等。开发 HTTP 服务器: Node.js 也可以用于开发创建 HTTP 服务器的工具如静态资源服务器、反向代理服务器等。构建命令行工具: Node.js 提供了一些内置模块可以用于构建命令行工具。开发桌面应用程序: 借助 Node.js 的包管理系统可以轻松地管理应用程序的依赖和模块。实现消息队列: Node.js 也可以用于实现消息队列以处理大量的异步任务。
npm (nodepackage manager),即Node包管理器 和 cnpm 的区别
npm是node官方的包管理器。cnpm是个中国版的npm,是淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的cnpm i :速度快但有时候会导致样式不兼容npm i :速度慢基本不会出什么问题
npm i 与npm install -S,-D,-g区别
npm i是npm install的简写。区别npm i会帮助检测与当前node版本最匹配的npm包版本号 运行 npm install module_name 安装插件用npm install 初始化项目时不会下载模块。-S是–save的简写。npm i module_name -S等同于npm i module_name --save 安装插件是需要发布到生产环境的-D是-dev的简写。 npm i module_name -D等同于npm i module_name --save-dev安装插件只用于开发环境不用于生产环境.-g将模块安装到全局。 npm i module_name -g
npx
npx 的全称是 node.js package executenode.js 的包执行工具npx 会自动查找当前依赖包中的可执行文件如果找不到会去 PATH 里找依然找不到就会帮你安装。
yarn
Apache Hadoop YARN Yet Another Resource Negotiator另一种资源协调者是一种新的 Hadoop 资源管理器
二、elementui网站快速成型工具
elementui官网链接https://element.eleme.cn.
2.1 安装
# 全局安装一般用全局方便
cnpm i element-ui -S #OR
# 按需使用
npm install babel-plugin-component -D如按需应用需要在babel.config.js中增加插件
{presets: [[es2015, { modules: false }]],plugins: [[component,{libraryName: element-ui,styleLibraryName: theme-chalk}]]
}2.2 修改App.vue新建Home.vue
App.vue
templatediv idappHome//div
/templatescript
import Home from ./components/Home
export default {name: App,components: {Home}
}
/script
style
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}
/styleHome.vue
templatediv classhelloh1hello/h1el-button typebutton/el-buttonel-button typeprimarybutton/el-buttonel-button typedangerbutton/el-buttonel-button typeinfobutton/el-buttonel-button typesuccessbutton/el-button/div
/templatescript
export default {name: Home
}
/script!-- Add scoped attribute to limit CSS to this component only --
style scoped
/style
2.3 启动项目
npm run serve #OR
yarn serve插件分离
三、sass
sass官网链接:https://www.sass.hk/.
#卸载sass
npm uninstall node-sass
#安装sasscnpm i sass-loader7 node-sass4 -S指定版本时如果node版本过高会安装失败
npm i -D sassscss和less可以切换如切换后报错安装less
//legacy-peer-deps命令用于绕过peerDependency里依赖的自动安装它告诉npm忽略项目中引入的各个依赖模块之间依赖相同但版本不同的问题
npm install less #安装失败可尝试添加--legacy-peer-deps
//npm包管理器中快速修复漏洞(未提示不执行)
npm audit fix --force测试成功
四、 reset.css重置网页的默认样式
官网参考连接:https://meyerweb.com/eric/tools/css/reset/. App.vue中使用重置样式 五、Font Awesome
官网连接https://fontawesome.com.cn/.
5.1 安装
cnpm i -D font-awesome5.2 main.js导入
import font-awesome/css/font-awesome.min.css5.3 使用 i classfa fa-users/i5.4 验证 六、axios和路由安装使用
6.1 axios
官方解释axios是一个基于 promise 的 HTTP 库可以用在浏览器和 node.js 中感觉没啥用 简单理解axios负责与后端交互get、post后端接口信息相当前后端的窗口
6.2 安装
cnpm i axios -S
# vue-router 4 以后的版本只适合 vue3用在vue2.0会报错
cnpm i vue-router3.5.3 -S# 如安装错误uninstall失败可使用强制卸载
npm i --force 无视冲突强制获取远端npm库资源6.3 main.js导入,设置挂载原型router放置在初始化vue中 6.4 配置路由这里也单独分块方便后续管理 6.5 使用 6.6 验证路由 七、懒加载和异步组件加载 //路由懒加载//component: () import(/components/Home)//异步组件加载component: resolve require([/components/Home],resolve)
