购物网站开发问题,页面模板现在不能用了吗,如何建立自己音乐网站,河南最新新闻事件15条一开始很多刚入手vue.js的人#xff0c;会扒GitHub上的开源项目#xff0c;但是发现不知如何运行GitHub上的开源项目#xff0c;很尴尬。通过查阅网上教程#xff0c;成功搭建好项目环境#xff0c;同时对前段工程化有了朦朦胧胧的认知#xff0c;因此将环境搭建过程分享… 一开始很多刚入手vue.js的人会扒GitHub上的开源项目但是发现不知如何运行GitHub上的开源项目很尴尬。通过查阅网上教程成功搭建好项目环境同时对前段工程化有了朦朦胧胧的认知因此将环境搭建过程分享给大家。 首先列出来我们需要的东西 node.js环境npm包管理器
vue-cli 脚手架构建工具
cnpm npm的淘宝镜像安装node.js 安装需要安装v10.15.3稳定版本不要安装v12.0.0版本目前使用最新的版本运行项目是会报错。 从node.js官网下载并安装node安装过程很简单一路“下一步”就可以了傻瓜式安装。安装完成之后打开命令行工具输入 node -v如下图如果出现相应的版本号则说明安装成功。 npm包管理器是集成在node中的所以直接输入 npm -v就会如下图所示显示出npm的版本信息。 OKnode环境已经安装完成npm包管理器也有了。由于有些npm有些资源被屏蔽或者是国外资源的原因经常会导致用npm安装依赖包的时候失败所有我还需要npm的国内镜像---cnpm。 安装cnpm 在命令行中输入 npm install -g cnpm --registryhttp://registry.npm.taobao.org 然后等待安装完成如下图。 完成之后我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的查看淘宝npm镜像官网。 安装vue-cli脚手架构建工具 在命令行中运行命令 cnpm install -g vue-cli 然后等待安装完成。(注意这里使用cnpm来替代npm不然速度超级慢会导致卡在那)通过以上三部我们需要准备的环境和工具都准备好了接下来就开始使用vue-cli来构建项目。 查看vue-cli版本 vue -V (大写的V) 用vue-cli构建项目 要创建项目首先我们要选定目录然后再命令行中把目录转到选定的目录。 在桌面目录下在命令行中运行命令 vue init webpack firstVue 。解释一下这个命令这个命令的意思是初始化一个项目其中webpack是构建工具也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称这个文件夹会自动生成在你指定的目录中我的实例中会在桌面生成该文件夹如下图。 运行初始化命令的时候回让用户输入几个基本的选项如项目名称描述作者等信息如果不想填直接回车默认就好。 打开firstVue文件夹项目文件如下所示。 这就是整个项目的目录结构其中我们主要在src目录中做修改。这个项目现在还只是一个结构框架整个项目需要的依赖资源都还没有安装如下图。 安装项目所需的依赖 要安装依赖包首先cd到项目文件夹firstVue文件夹然后运行命令 cnpm install 等待安装。 安装完成之后会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹这里边就是我们项目需要的依赖包资源。 安装完依赖包之后就可以运行整个项目了。 运行项目 在项目目录中运行命令 npm run dev 会用热加载的方式运行我们的应用热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。 这里简单介绍下 npm run dev 命令其中的“run”对应的是package.json文件中scripts字段中的dev也就是 node build/dev-server.js命令的一个快捷方式。 项目运行成功后浏览器会自动打开localhost:8080如果浏览器没有自动打开可以手动输入。运行成功后会看到如下所示的界面。 如果看到这个页面说明项目运行成功了。 踩坑注意 安装需要安装v10.15.3稳定版本不要安装v12.0.0版本目前使用最新的版本运行项目是会报错。 如果安装v12.0.0版本报了这个错误就卸载后重新安装v10.15.3版本就可以了。 查看版本 查看node版本 node -v 查看npm版本npm -v 查看cnpm版本cnpm -v 查看vue-cli版本vue -V (大写) vue --version 查看webpack版本webpack -v vue-cli 3.版本 vue-cli 3.版本使用新的命令构建项目目录结构也和之前的有所不同 npm create my-app cd my-app npm sun serve 转载于:https://www.cnblogs.com/panchanggui/p/10783074.html
