vue 构建项目 文件引入

  1、vue引用依赖文件。  举例:axios

  先安装 axios。如果直接安装 vue-axios 会报错

npm install axios
npm install --save axios vue-axios

  

  配置模板:

import Vue from ‘vue‘
import axios from ‘axios‘
import VueAxios from ‘vue-axios‘

Vue.use(VueAxios, axios)

  使用:

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

this.axios.get(api).then((response) => {
  console.log(response.data)
})

this.$http.get(api).then((response) => {
  console.log(response.data)
})

  还有一种跟平时引用的使用方法:

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  有些css文件等文件需要本地引用(如base.css),那么怎么办呢。直接引用:

  css:

import ‘../static/css/base.css‘
import ‘../static/css/style.css‘

  js:单页面引用:

<script src="../../static/js/main.js"></script>  

    

     

vue 构建项目遇到的问题

vue 构建项目遇到的请求本地json问题

原文地址:https://www.cnblogs.com/nelsonlei/p/10666802.html

时间: 2024-08-02 04:50:15

vue 构建项目 文件引入的相关文章

vue 构建项目vue-cli

1.首先得有node和npm的环境,node的下载:http://nodejs.org/download/.安装node之后,npm也自动生成了,显示版本号就意味着安装成功 2.接下来就是安装vue-cli脚手架,执行以下命令: $ npm install -g vue-cli 安装脚手架 $ vue init webpack demo 利用webpack生成一个模板,项目名是demo $ cd demo 进入到demo项目 $ npm install 安装依赖 $ npm run dev 运行

vue2.x利用脚手架快速构建项目并引入bootstrap、jquery

要使用vue-cli脚手架搭建项目,首先需要安装node.js Node.js官网:https://nodejs.org/en/download/ 选择你对应的系统即可下载,下载完成后傻瓜式安装即可. 安装完成之后打开cmd,输入node -v 出现版本号即安装成功 接下来便可使用脚手架快速构建你的项目了: npm install -g vue-cli                   全局安装vue-cli vue init webpack test                 生成项目

vue构建项目全过程

1.node版本请更新到6.9.X版本以上,不然npm依赖会出问题 2.命令行里运行npm install --global vue-cli 3.npm install --global webpack 安装的时候报了: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]^1.0.0 (node_modules\webpack\node_modules\chokidar\node_modules\fsevents):

vue构建项目步骤

1.node版本请更新到6.9.X版本以上,不然npm依赖会出问题 2.命令行里运行npm install --global vue-cli 3.npm install --global webpack 安装的时候报了: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]^1.0.0 (node_modules\webpack\node_modules\chokidar\node_modules\fsevents):

总结一下最近使用vue构建项目时遇到的坑

虽然vue-cli提供了很方便的脚手架来构建自己的项目,但是在实际开发过程中,我还是遇到了一些问题,现将其摘要如下: 1.使用npm run build命令后会将我们的代码压缩至dist文件夹内,dist文件夹内目录如下: 此时直接打开index.html是无法打开的,我的解决办法是将其放在本地tomcat服务器内,然后通过启动bin/startup.bat启动服务器,即可以在浏览器正常调试. 2.打开后发现有一些图片没有显示,有一些压缩为base64,一些没有被压缩,检查后发现是图片文件过大,

vue中项目如何引入sass

1.进入项目目录 2.安装sass的依赖 npm install --save-dev sass-loader npm install --save-dev node-sass 3.在build文件夹下的webpack.base.conf.js的rules里面添加配置(和其它配置项形式一样即可) {  test: /\.sass$/,  loaders: ['style', 'css', 'sass'] } 4.在使用sass的vue文件的 <style lang="scss"&

vue 构建项目简单流程

一: vue init webpack-simple#1.0 vue-project cd vue-project npm install npm run dev 淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org vue init webpack vue-projectvue init webpack-simple vue-project //推荐这个方法 cd vue-project cnpm install

用vue构建项目同一局域网下通过ip访问

在webpack配置文件下改为 host:'0.0.0.0' 改为后启动跳转不到登录页面 需手动修改浏览器上的0.0.0.0:8080为自己ip加上:8080 就可以在别的电脑上进行访问了 举一反三: 严格说来,0.0.0.0已经不是一个真正意义上的IP地址了.它表示的是这样一个集合:所有不清楚的主机和目的网络.这里的"不清楚"是指在本机的路由 表里没有特定条目指明如何到达.对本机来说,它就是一个"收容所",所有不认识的"三无"人员,一 律送进去

【vue】vue-cli3构建项目中实现图片懒加载

前两天正好写了文章如何用实现图片懒加载[性能优化]JS实现图片懒加载,今天在使用vue构建项目的时候就遇到了要做图片懒加载的优化需要,本想把前两天的代码直接copy过来的,后来想查查看有没有更简便的方法,果不其然,vue中直接有插件可以使用,看了下实现时候的效果,实现原理都和原生js是一样的,vue果然真香! 接下来我们来讲vue-lazyload插件的使用: 1.安装插件 cnpm i vue-lazyload -S 2.入口文件main.js中配置: import Vue from 'vue