商业网站建设规划范文,vps可以多少wordpress,电商网站特点,汽车网站有哪些许久未曾更新文章#xff0c;虽然不是程序员但还是忘怀不了撸码的觉悟.1.VUE环境搭建安装node.js (项目开发前准备) Node.js官网#xff1a;https://nodejs.org/en/ 进入Node.js官网#xff0c;选择下载并安装Node.js。安装过程只需要点击“下一步”即可#xff0c;非常简单…许久未曾更新文章虽然不是程序员但还是忘怀不了撸码的觉悟.1.VUE环境搭建安装node.js (项目开发前准备) Node.js官网https://nodejs.org/en/ 进入Node.js官网选择下载并安装Node.js。安装过程只需要点击“下一步”即可非常简单。 node.js安装完成后 验证Node.js是否安装好在windows下winr召唤出运行窗口输入cmd打开命令行窗口。(任意路径的cmd下)输入node -v即可得到对应的Node.js版本。 npm包管理器是集成在Node.js中了所以在安装Node.js的时候就已经自带了npm。注意npm的版本需要在3.0.0以上版本所以如果npm的版本小于3.0.0,输入以下命令更新npm至最新版本。 npm -g install npm复制代码安装cnpm (项目开发前准备) 安装完node之后npm包含的很多依赖包是部署在国外的。 由于资源的限制安装npm依赖包的时候经常失败建议使用npm的国内镜像cnpm 命令行工具代替默认的npm。 npm 国内镜像https://npm.taobao.org/ 在(任意路径的cmd下)命令行中输入以下内容等待安装 npm install -g cnpm -registryhttps://registry.npm.taobao.org复制代码cnpm全局安装vue-cli (若用临时服务可全局安装 live –server,此步省略) 在(任意路径的cmd下)命令行中运行以下命令然后等待安装 cnpm install -g vue-cli 复制代码安装完后检查是否安装成功输入vue出现以下提示表示安装成功。构建项目 (可直接在磁盘上创建文件夹在编辑器中直接打开项目文件夹) 。新建项目 先将vue项目建在f盘的vue-demo文件夹下再利用命令进入此目录。在cmd中输入盘符f:回车即可进入F盘 输入命令 cd vuedemo跳到此目录下初始化一个项目 在此目录下创建一个基于 webpack 模板的新项目,即在cmd中输入以下命令若使用live-server则 在新建项目后 npm init,初始化成功后根目录下多一个 package.json 文件 vue init webpack my-vue-project复制代码意思是初始化一个项目利用的是webpack打包和压缩此项目命名为my-vue-project。这样my-vue-project文件夹就自动生成刚刚在指定的目录中在初始化项目的过程中需要输入项目名、描述、作者等。安装npm项目依赖 (若用live-server 此步可省略) cmd进入前端vue项目的根目录在cmd中注意需要使用命令先定位到my-vue-project目录下定位命令cmd – 盘符: - cd my-vue-project 然后输入命令cnpm install安装项目所需的依赖包资源 cnpm install 复制代码执行完成后 可以看到my-vue-project文件夹下多了一个node_modules文件npm编译 第一次运行前要对项目进行编译cmd进入前端vue项目的根目录输入命令npm run build复制代码此时会对根目录下的package.json对build命令的定义进行编译一般build webpack -p。运行项目 cmd进入前端vue项目的根目录使用命令npm run dev复制代码 运行项目此时会用nodejs启动这个前端的vue项目 项目运行成功后浏览器可以用localhost:8080复制代码打开呈现以下页面。注意浏览器的版本低版本的不支持哦。2.VUE调试工具vue-devtools的安装与使用在github上下载压缩包github下载地址github.com/vuejs/vue-d…解压到本地的磁盘 找到文件vue-devtools/shells/chrome/manifest.json修改persistent为true。进入 输入npm install复制代码 之后等待下载项目依赖包, 然后目录下就会多出一个node-modules文件夹里面就是项目所依赖的包 再进行npm run build复制代码 npm run build这一步一定不要忘了没有执行这一步的话项目文件夹shellschrome文件夹里会少一个src文件夹,如下图我们找到谷歌浏览器的扩展程序功能勾选开发者模式然后我们将插件文件夹里的shellschorme文件夹直接拖到页面中完成安装。 注意如果我们没有执行第4部的npm run build复制代码在这里会报错无法加载背景脚本build/background.js在插件的目录下执行npm run dev复制代码这个时候我们的插件就可以运行了,打开localhost:8080可以看到插件已经安装并运行了。我们在打开本地的其他项目时就不需要在vue-devtools文件夹下执行npm run dev复制代码了因为这个插件已经安装在浏览器中。接下来就愉快的调试你的vue项目吧。以localhost:8080访问项目时只需在项目目录下执行以下代码 npm run dev winr 盘符 cd 文件夹名称 npm run dev复制代码3.配置nginx(多个vue项目)配置nginx前后端分离项目一般都要解决跨域问题配好nginx安装目录/conf/nginx.conf的server模块配置项目主机地址前端项目里需要有个config文件夹里面要有host.js或者config.js文件定义nginx转域后的主机地址端口号也就是nginx.conf里面server模块的server_name值listen的端口号。git项目拉下来没有的话自己加一个文件内容范例下面用${}表示nginx.conf里面server模块对应的字段值const host http://${server_name}:${listen}/server/;
export {host};复制代码配置windows的HOSTS由于是在本机上启用前端项目需要将127.0.0.1和nginx代理后的域名做对应。找到系统的HOSTS文件win7系统下在C:\Windows\System32\drivers\etc里面增加一条“127.0.0.1 ${server_name}”。否则本地启动前端项目后浏览器访问nginx代理后的域名会发生dns错误。第一次配置好后以后启动只用两步启动nginx
进入前端项目根目录cmd运行npm run dev复制代码一个比较典型的用webpack管理的vue项目应该有如下文件和文件夹config/定义代理的域名dist
dist/: 整个前端项目用webpack打包后的目标存放文件夹里面一般有bundle.js文件
lib/: 开发时引用的一些依赖文件最经典的就是jquery
node_modules/上面介绍的用npm对项目依赖组件进行安装时就放在这个文件夹里。
src/自己写的源代码
index.html主页入口文件
package.json和webpack.config.js这两个文件应该是组件依赖关系和管理打包的配置文件
不太懂反正没有是不能cnpm install、cnpm run build、cnpm run dev的。复制代码4.开发环境运行npm run dev复制代码 webpack配置文件为webpack.dev.conf.js复制代码 浏览器自动刷新将webpack.dev.conf.js中的 hot设置为 false复制代码
