淄博网站建设hiddd,做网站需要的素材资料,网站开发的前后台的步骤分别为,宁波哪里有网站建设高端的前言
其实你不要看我的文章比较长#xff0c;但是他就是很长#xff01;步骤其实很简单#xff0c;主要是为新手加了很多解释#xff01;
步骤一#xff1a;下载并安装 Node.js 访问 Node.js 官网#xff1a; Node.js — Download Node.js 下载 Windows 64 位版本但是他就是很长步骤其实很简单主要是为新手加了很多解释
步骤一下载并安装 Node.js 访问 Node.js 官网 Node.js — Download Node.js® 下载 Windows 64 位版本 选择适合你操作系统的版本进行下载。 安装 Node.js 安装过程基本只需点击“Next”即可完成。 检查环境变量 安装完成后检查环境变量是否已自动配置。如果未配置可以手动添加系统变量。
如果没有设置手动添加一下
系统变量NODE_PATH
路径你的安装目录
验证下环境变量和安装完毕 node -v
npm -v 步骤二修改 npm 路径配置如果安C磁盘空间足够大就忽略
因为后续创建的VUE工程目录默认会保存在安装node的文件中npm安装的全局模块和缓存默认安装在C:\Users\用户名\AppData\Roaming\npm文件夹里
更换目录就随便找个地方大的位置创建两个文件夹
修改全局模块安装路径 默认情况下npm 安装的全局模块和缓存会存放在 C:\Users\用户名\AppData\Roaming\npm 文件夹中。为了方便管理可以将其路径修改到 Node.js 安装目录下。
创建两个文件夹 在命令窗口执行
npm config set prefix E:\Nodejs\node_global
npm config set cache E:\Nodejs\node_cache
里面绿色字是我的目录你要改成你的
里面绿色字是我的目录你要改成你的
里面绿色字是我的目录你要改成你的 如果不修改镜像地址使用淘宝的或者阿里云的 但是也有可能链接不上
npm config set registry http://registry.npm.taobao.org
步骤三安装 cnpm
由于 npm 在国内的下载速度较慢建议安装 cnpm淘宝 npm 镜像
npm install -g cnpm --registryhttp://registry.npm.taobao.org 但是也有可能不管用那你就恢复回来默认的具体命令请问AI 步骤四安装 Vue 脚手架
安装 Vue CLI
npm install -g vue/cli-initnpm install -g vue/cli 验证安装 vue -v 出现错误 重新指定下环境变量,把下面路径放在环境变量的path中! 如果还不行那就
确保您的 npm 是最新版本可以使用以下命令更新 npm
npm install -g npm
如果您之前已经安装过 Vue CLI但仍然无法使用 vue 命令可以尝试重新安装 Vue CLI
npm uninstall -g vue/cli
npm install -g vue/cli
最终 步骤五安装 webpack npm install -g webpack 如果不安装 webpack你可能会遇到以下问题和限制
1. **无法使用 Vue CLI 创建项目** Vue CLI 内部依赖 webpack 来构建和管理项目。如果你没有安装 webpackVue CLI 将无法正常工作从而无法创建新的 Vue 项目。
2. **无法使用现代前端工具和插件** webpack 提供了丰富的插件和加载器生态系统可以处理各种类型的资源如 JavaScript、CSS、图片、字体等。如果没有 webpack你将无法使用这些现代前端工具和插件从而限制了项目的功能和性能优化。 3. **无法进行模块打包** webpack 是一个模块打包工具可以将多个模块打包成一个或多个文件。如果没有 webpack你将无法进行模块打包这会导致项目中的资源无法有效地管理和优化。
4. **无法进行代码分割** 代码分割Code Splitting是优化大型应用程序性能的重要手段。webpack 支持代码分割可以将应用程序的代码分割成多个小块按需加载。如果没有 webpack你将无法进行代码分割从而影响应用程序的加载速度和性能。 5. **无法使用开发服务器和热模块替换** webpack 提供了开发服务器webpack-dev-server和热模块替换HMR功能可以在开发过程中实时重新加载代码提高开发效率。如果没有 webpack你将无法使用这些功能开发体验会大打折扣。
6. **无法自定义构建过程** webpack 允许你自定义构建过程添加新的加载器、插件等。如果没有 webpack你将无法自定义构建过程从而限制了项目的灵活性和扩展性。
7. **无法使用现代前端框架和库** 许多现代前端框架和库如 React、Angular 等都依赖 webpack 进行构建和打包。如果没有 webpack你将无法使用这些框架和库从而限制了项目的开发选择。
总结
虽然 Vue CLI 内部已经集成了 webpack但在某些情况下如自定义构建过程、使用其他前端框架等你可能需要手动安装和配置 webpack。如果不安装 webpack你将无法使用 Vue CLI 创建项目也无法享受 webpack 提供的各种功能和优化手段从而限制了项目的开发和性能优化。
步骤六创建 Vue 项目
创建vue项目方式一使用命令行创建(cmd启动在那个文件夹就创建在哪里)
假设你在 E:\Nodejs 目录下打开命令提示符并运行 vue init webpack vue-demo 命令那么项目文件会被创建在 E:\Nodejs\vue-demo 目录下
1.打开命令提示符管理员权限
vue init webpack vue-demo
vue-demo就是你项目名字可以修改
按照提示完成项目配置 可以选择默认配置按回车键完成。 中间会问你一些问题仔细看看然后无脑回车填Y 2.进入创建好的项目目录vue-demo 这是我的去找你的打开命令窗口并安装依赖
我自己创建了文件夹移动了一下 在这里打开CMD 为我的新项目执行依赖包安装
npm install 这个命令需要在你刚才创建的vue-demo 项目文件中运行的CMD命令中运行意思为这个项目安装依赖包你可以i可以安装全局也就是整个电脑都安装了这样未来创建的项目也可以用了否则每个项目都需要单独安装 每次修改了 package.json 都需要安装一次~ npm install使用场景 初始化项目 当你克隆一个新项目或从零开始创建一个项目时运行 npm install 会自动安装项目所需的所有依赖包。 更新依赖 如果你修改了 package.json 文件中的依赖项运行 npm install 会根据新的依赖配置重新安装所有包。 安装新依赖 当你需要添加新的依赖包时可以使用 npm install package-name 命令。 安装开发工具 当你需要安装开发工具如 webpack、eslint 等时可以使用 npm install --save-dev package-name 命令。 安装全局工具 当你需要安装全局工具如 Vue CLI、create-react-app 等时可以使用 npm install -g package-name 命令。 npm install 是 Node.js 包管理工具 npmNode Package Manager中的一个命令用于安装项目所需的依赖包。以下是 npm install 的主要功能和使用场景
npm install主要功能 安装项目依赖 当你在项目根目录下运行 npm install 时npm 会根据项目根目录中的 package.json 文件中的 dependencies 和 devDependencies 字段自动下载并安装所有依赖包。 安装指定包 你可以通过 npm install package-name 命令安装指定的包。例如 npm install vue 这会在当前项目的 node_modules 目录下安装 vue 包并将其添加到 package.json 文件的 dependencies 字段中。 安装开发依赖 使用 --save-dev 或 -D 选项可以安装开发依赖包。例如 npm install --save-dev webpack 这会将 webpack 包安装到 node_modules 目录并将其添加到 package.json 文件的 devDependencies 字段中。 安装全局包 使用 -g 或 --global 选项可以安装全局包。例如 npm install -g vue/cli 这会将 vue/cli 包安装到全局环境中可以在任何地方使用。 安装特定版本的包 你可以通过指定版本号来安装特定版本的包。例如 npm install vue2.6.14 这会安装 vue 的 2.6.14 版本。 安装最新版本的包 使用 latest 可以安装包的最新版本。例如 npm install vuelatest
# 安装项目依赖
npm install# 安装指定包
npm install vue# 安装开发依赖
npm install --save-dev webpack# 安装全局包
npm install -g vue/cli# 安装特定版本的包
npm install vue2.6.14# 安装最新版本的包
npm install vuelatest
运行项目
npm run dev 创建vue项目方式二使用 Vue UI 创建
启动 Vue UI
vue ui
在浏览器中打开 Vue 项目管理页面 按照提示创建新项目。
项目结构 node_modules 所有依赖项 public 静态内容 favicon.ico 小图标 index.html 入口 HTML 文件 src 项目执行的主目录 assets 静态文件图片、JSON、图标、字体等 components 组件 router 路由配置文件 views 放置页面内容 App.vue 项目的根组件 main.js 项目的主入口文件 .gitignore Git 忽略文件 babel.config.js Babel 配置文件 package.json 所有依赖包配置文件 README.md 项目文档
接下来用VScode 或者IDEA打开目录进入开发-
....此处省略十几天
开发完毕以后
步骤七 运行项目
1.在自己的项目中再次执行安装依赖
因为我们的依赖可能有更新
npm install
2.启动项目
npm run dev 或者
npm run serve
结果 出错了
解决 npm run serve 报错的问题
当你在 Vue 项目中运行 npm run serve 时出现 Missing script: serve 错误这通常是因为 package.json 文件中没有定义 serve 脚本。你可以通过以下步骤解决这个问题
1. 检查 package.json 文件 打开项目根目录下的 package.json 文件检查 scripts 部分是否包含 serve 脚本。
如果没有 serve 脚本可以手动修改添加
修改前 修改后 scripts: {dev: webpack-dev-server --inline --progress --config build/webpack.dev.conf.js,start: npm run dev,serve: webpack-dev-server --inline --progress --config build/webpack.dev.conf.js,unit: jest --config test/unit/jest.conf.js --coverage,e2e: node test/e2e/runner.js,test: npm run unit npm run e2e,lint: eslint --ext .js,.vue src test/unit test/e2e/specs,build: node build/build.js},
成功
2. 不行就继续使用 npm run dev
如果你已经有一个 dev 脚本并且它可以正常运行那么你可以继续使用 npm run dev 来启动开发服务器。 { scripts: { dev: vue-cli-service serve, build: vue-cli-service build, lint: vue-cli-service lint } }
在这种情况下你可以运行 npm run dev
总结
npm run serve 报错 Missing script: serve 通常是因为 package.json 文件中没有定义 serve 脚本。你可以通过手动添加 serve 脚本或继续使用 npm run dev 来解决这个问题。确保你的项目配置正确并且依赖包已正确安装。
访问项目 打开浏览器访问 http://127.0.0.1:8080 查看项目运行效果。
这个端口会自动变化 步骤八 关闭网页服务
在命令窗口按两次CtrlC
