东莞大型网站建设,个人主页经典句子,wordpress 建战经营,公司logo设计价格一、准备 安装NodeJs 安装Webpack 配置环境变量 技巧使用#xff1a; 1. npm 淘宝路径配置#xff1a;npm config set registryhttps://registry.npm.taobao.org 2.查看npm命令列表 $ npm help 二、搭建项目 1、全局安装vue脚手架工具 vue-cli npm install vue…一、准备 安装NodeJs 安装Webpack 配置环境变量 技巧使用 1. npm 淘宝路径配置npm config set registryhttps://registry.npm.taobao.org 2.查看npm命令列表 $ npm help 二、搭建项目 1、全局安装vue脚手架工具 vue-cli npm install vue-cli -g 2、初始化 项目名小写 vue init webpack project 或 vue init webpack-simple project # 前者构建的应用丰富于后一个 项目基本信息配置 Project name (demo-one) # 项目名称 Project description (A Vue.js project) # 项目描述 Author 作者 Vue build (Use arrow keys) # 直接回车 选择runtimecompiler Install vue-router? (Y/n) # 是否安装Vue路由也就是以后是spa但页面应用需要的模块 Use ESLint to lint your code? (Y/n) # 使用 ESLint 代码检测工具 Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint使用箭头键 Setup unit tests with Karma Mocha? (Y/n) # 是否需要单元测试工具 暂时不需要 n 否 Setup e2e tests with Nightwatch? (Y/n) # 是否安装端到端测试工具 暂时不需要 n 否 Should we run npm install for you after the project has been created? 在创建完项目之后是否需要自动运行npm install来下载第三方包 我这里选择第一个npm安装 3、安装依赖包 node_modules npm install 4、运行项目 npm run dev 三、项目说明 1、npm install安装的是什么呢我们刚刚在 vue init 初始化的时候会生成一个 package.json 文件 npm install 则会安装package.json中写的需要依赖的第三方包包括dependencies和devDependencies//如果该安装方式太慢可以使用cnpm淘宝代理镜像 安装好后就 可以 npm run dev 运行项目了 2、vue-cli初始化文件目录结构详解 为什么把这里的App.vue称为根组件main.js称为入口文件呢 在main.js入口文件中App.vue根组件import进来了挂载在了index.html主页面id为app的div上。也就是说挂载在index.html主页面的组件就是根组件把根组件挂载在主页面的文件就是入口文件。 3、如何配置 npm run dev 在浏览器后自启动项目 通过修改config中的index.js文件把autoOpenBrowser改为true~下次运行npm run dev或者npm start后即会自动启动页面 四、开发过程中遇到的跨域问题 由于还在script标签开发的方式下前端文件和后端文件都在同在apache服务器下直接请求本机同一个端口的文件并不属于跨域。但是在vue-cli方式下由node.js起的一个临时的服务器占用的是8080端口和后端所方式的文件不处于同一个端口号这就出现了跨域的问题。解决方法修改config index.js中的proxyTable 在main.js入口文件中加入一行Vue.prototype.HOST /DNA以请求的url地址为url: this.HOST/insert/get_data为例子对proxyTable做一个说明请求的url为/DNA/insert/get_data,由于请求的url中包含了proxyTable中配置了的/DNA,这时候Node.js代理服务器就可以发挥作用了。Node.js会去请求http://localhost/repo/DNA/ins...把请求得到的接口返回给前端。为啥是http://localhost/repo/DNA/ins...下面做一下讲解 路径重写有什么用呢如果你程序得接口本来就有这个路径地址你可以不需要重写如果没有就需要重写把其重写为空我这个程序接口其实本来就有/DNA,其实我这里可以不需要重写然后把target改为http://localhost/repo 五、关于打包 vue-cli已经把打包的东西配置好了只需要通过npm run build 或者 node build/build.js即可对程序进行打包。为啥输入npm run build可以进行打包呢也是package.json配置好的原因 打包出来的文件结果默认情况打包生成的文件会放在vue-demo下的dist文件夹注意双击html是不能打开这个文件的双击打开显示的是一片空白打包出来的文件需要放在服务器上才能跑起来以前我双击打开看到白白的文件一直以为是我打包出错了哈哈哈。 至于static文件和index.html存放的路径是可以修改的可以修改为任意的路径方便打包后的程序的运行。修改config文件夹下的index.js文件中build对象的参数即可。 原文作者风子猪原文地址https://segmentfault.com/a/1190000015680030转载于:https://www.cnblogs.com/yangchin9/p/11004638.html
