尚品中国网站,网页布局方式,wordpress go页面如何使用,建设一个小游戏网站目录 一、下载node.js
二、下载vue-cli与webpack插件
三、项目初始化(项目配置详细信息)
四、项目启动
五、Vue项目工程结构#xff08;扩展知识#xff09; 一、下载node.js
1.检测是否已经安装过node.js
打开控制台,输入
npm -v如果有会显示对应版本 如果没有会显示… 目录 一、下载node.js
二、下载vue-cli与webpack插件
三、项目初始化(项目配置详细信息)
四、项目启动
五、Vue项目工程结构扩展知识 一、下载node.js
1.检测是否已经安装过node.js
打开控制台,输入
npm -v如果有会显示对应版本 如果没有会显示无法找到 如果没有则需要进行安装npm
window系统安装过程
nodejs安装及环境配置_Mr.羽猫君的博客-CSDN博客
linux系统安装指令
sudo apt install npm下载好并配置环境后重新进行版本查询。检测是否成功 二、下载vue-cli与webpack插件
1.设置npm下载为国内镜像因为npm下载国外的软件会非常慢指令
npm config set registry https://registry.npm.taobao.org #经过下面的配置以后所有的 npm install 都会经过淘宝的镜像地址下载 2.进行全局安装npm-cli插件
npm install vue-cli -g
如果出现这种情况 说明你可能并没有用管理员身份打开控制台请你在控制台右键以管理员身份打开。
而Linux用户只需要在指令前加上sudo如下,或者直接输入sudo并回车进入管理员模式。
sudo npm install vue-cli -g
安装好如下图所示 判断是否安装成功使用以下指令
vue --version 以下解释vue-cli插件作用 项目初始化和配置Vue CLI 插件可以在项目初始化时提供一些预配置选项帮助开发者快速创建一个符合特定需求的项目结构。例如Vue Router 插件可以集成路由功能Vuex 插件可以集成状态管理功能。这样开发者可以通过简单的命令或交互式界面进行选择自动配置项目的依赖和文件结构。 开发扩展Vue CLI 插件可以提供额外的开发支持和工具使开发体验更加高效和愉悦。例如ESLint 插件可以集成代码规范检查工具Stylelint 插件可以集成样式规范检查工具Unit Testing 插件可以集成单元测试工具等。这些插件可以帮助开发者在开发过程中保持良好的代码质量、一致的代码风格并提供更好的调试和测试能力。 构建优化Vue CLI 插件可以在项目构建过程中提供优化功能以提高应用程序的性能和用户体验。例如Babel 插件可以进行 JavaScript 代码转译将新的 JavaScript 语法转换为浏览器可兼容的代码CSS 预处理器插件可以将预处理器语言如 Sass 或 Less编译为普通的 CSS 代码Webpack 插件可以进行代码分割、资源压缩、缓存优化等等。 部署和发布Vue CLI 插件可以提供一些工具和配置选项以帮助开发者更轻松地部署和发布其 Vue.js 应用程序。例如PWA 插件可以帮助将应用转换为渐进式网络应用程序并自动生成相关的配置文件Docker 插件可以帮助开发者在容器环境中打包和运行应用程序。 3安装webpack的插件\全局安装
npm install -g webpack
Window系统如果报错请你检查以下同源策略
#像这种都是策略问题用管理员打开vscode然后设置策略
get-ExecutionPolicy#执行set-ExecutionPolicy RemoteSigned 然后 get-ExecutionPolicy显示RemoteSigned就是ok了set-ExecutionPolicy RemoteSigned
安装成功后显示 以下解释webpack插件作用 优化代码Webpack 插件可以通过代码分割、Tree Shaking、Scope Hoisting 等技术优化 JavaScript 代码和构建结果的大小和性能。例如CommonsChunkPlugin 插件可以将公共模块提取到单独的文件中避免重复打包提高构建速度UglifyJsPlugin 插件可以将 JavaScript 代码压缩和混淆减少文件大小提高网站性能。 处理资源文件Webpack 插件可以帮助处理各种资源文件如图片、CSS、字体等。例如ImageMinWebpackPlugin 插件可以通过压缩和优化图片文件减少图片大小提高网页加载速度ExtractTextWebpackPlugin 插件可以将 CSS 文件提取到单独的文件中便于浏览器异步加载。 打包结果管理Webpack 插件可以帮助管理构建结果包括输出目录、文件名、版本号等信息。例如HtmlWebpackPlugin 插件可以根据模板文件生成 HTML 文件并自动注入构建结果CleanWebpackPlugin 插件可以在每次构建前清除输出目录避免旧文件的残留。 增强开发体验Webpack 插件可以提供额外的开发支持和工具使开发体验更加高效和愉悦。例如HotModuleReplacementPlugin 插件可以实现热替换功能允许在不刷新页面的情况下更新模块FriendlyErrorsWebpackPlugin 插件可以美化 Webpack 构建错误信息方便开发者进行调试和排错。 三、项目初始化(项目配置详细信息)
输入指令
vue init webpack 文件名称
进入以下选项
第一部分项目信息类 第二部分项目配置类
1.项目构建---一般选择第一个。 Runtime Compiler推荐大多数用户使用 使用 Runtime Compiler 构建方式时Vue.js 包含完整的运行时和编译器代码。这种构建方式允许你在 Vue 组件中使用 template 语法并且会在运行时将模板编译为渲染函数。渲染函数会在组件实例化过程中动态生成然后再渲染组件到页面上。这种方式的好处是比较灵活可以直接在组件中使用 template并且支持在 Vue 组件中编写完整的 Vue 特定 HTML 代码。 Runtime-only轻量化构建适用于一些特定场景 使用 Runtime-only 构建方式时Vue.js 只包含运行时代码不包含编译器。这种构建方式下无法在组件中直接使用 template而是需要使用 render 函数手动编写组件的渲染逻辑。这样做可以减小 Vue.js 包的体积通常会比 Runtime Compiler 构建出来的包小约 6KB (mingzip)。Runtime-only 构建方式更适合使用手动编写的 render 函数或者配合使用 Vue 的单文件组件 (.vue 文件) 来开发。 2.安装路由---一般选择是(Y) 安装 Vue Router 是用于在 Vue.js 应用程序中实现路由功能的步骤。路由是指根据不同的 URL 地址展示不同的内容或页面的机制。Vue Router 提供了一组工具来实现这个机制使得在单页应用 (SPA) 中进行页面切换、导航和参数传递变得更加简单和灵活。 3.是否开启ESLint代码检测---个人需求 使用 ESLint 是为了在代码编写过程中进行代码风格和质量的检查。ESLint 是一个开源的 JavaScript 代码检查工具它可以帮助开发者发现并修复代码中的潜在问题以保证代码的一致性和可读性。 4. 是否开启单元测试--个人需求 设置单元测试是为了在开发过程中确保代码的正确性和稳定性提高代码质量和可维护性。单元测试是一种自动化测试它会对代码中的单个模块或函数进行测试以验证其预期行为是否符合要求。 5.项目下载方式---一般通过npm下载 配置过npm镜像后使用npm对项目下载会更加快速。 四、项目启动
在项目目录下输入指令
npm run dev 查看结果与对应端口 可以看到已经成功启动项目后面就是项目运行的链接。
使用ctrl点击链接http://localhost:8080 可以快速打开对应网页地址 这就是vue项目的主界面了。
想要关闭项目也很简单在控制台输入Ctrl c即可终止项目可能会让你二次确定是否终止填写y即可 下面介绍vue项目的工程目录以及对应作用仅作为拓展知识 五、Vue项目工程结构扩展知识
