Articles of vuejs2

webpack生产后生成IIS的空页面

我有一个VUE 2应用程序,我想在Windows Server 2012 R2上的IIS上部署。 节点版本:6.9.5 npm版本:4.3.0 我的问题是,当我打电话给该网站(index.html和静态文件夹与由webpack生成的js和css),该网站保持空白。 所有的js和css文件加载正确,但网站不显示任何东西。 这里是我的webpack的configuration文件: bundle.js: require('./check-versions')() process.env.NODE_ENV = 'production' var ora = require('ora') var rm = require('rimraf') var path = require('path') var chalk = require('chalk') var webpack = require('webpack') var config = require('../config') var webpackConfig = require('./webpack.prod.conf') var spinner = ora('building for production…') spinner.start() rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { […]

运行npm run build vue后,某些图片没有被加载

我完成了我的Vue应用程序,并运行npm run build部署应用程序。 一切似乎都很好。 但是,我的一些图片将无法运行。 我的四个图像渲染得很好。 但是,这四个图像不在我的img文件夹中。 在控制台上,我得到这个错误: GET file:///C:/static/img/Two.550dff0.jpeg net::ERR_FILE_NOT_FOUND 图像名称是“Two.550dff0.jpeg”,它位于img文件夹中,但应用程序无法访问它。 这是为什么? 而且,对于渲染的四个图像,这些图像不在img文件夹中。 我也无法在dist文件夹中find这四个图像。 这是index.HTML代码: <script type=text/javascript src=static/js/manifest.1f30a815db1d214533a9.js></script> <script type=text/javascript src=static/js/vendor.0757592c5dae8c3165a1.js></script> <script type=text/javascript src=static/js/app.53c259c8c3df1ec9179f.js></script>

使用webpack将一个项目中的多个Vuejs组件发布到npm

我试图发布一个项目,以包含两个或更多的VUE组件的npm,所以我可以导入,注册和使用这样的组件: import Component1 from 'npm-package' import Component2 from 'npm-package' 这是我的webpack文件: const webpack = require('webpack'); const merge = require('webpack-merge'); const path = require('path'); var config = { output: { path: path.resolve(__dirname + '/dist/'), }, module: { loaders: [ { test: /\.js$/, loader: 'babel', include: __dirname, exclude: /node_modules/ }, { test: /\.vue$/, loader: 'vue' }, { test: […]

如何在laravel 5中发布/使用节点模块?

我有我的laravel应用程序,我开始使用Vuejs 。 我是新来的,也许我错过了一些核心概念。 无论如何(例如)我想要使用这个组件 :具有search自动完成的多选。 跑完之后 npm install vue-multiselect@next –save 我在我的node_module组件目录中,我也有package.json文件中的依赖vue-multiselect 。 现在我有点困惑于如何前进,并在我的一个观点使用这个组件。 网站安装不起作用。 我不能在common js使用require或import关键字。 基本用法 HTML <multiselect v-model="value" :options="options"> JavaScript的 import Multiselect from 'vue-multiselect' // register globally Vue.component(Multiselect) export default { // OR register locally components: { Multiselect }, data () { return { value: null, options: ['list', 'of', 'options'] } } } […]

问题在vuejs 2组件中导入css / js文件

我有以下.vue组件文件: <template> …. </template> <script> export default { /* stuff here*/} </script> <style> </style> 现在我想只为这个组件包含一些css / js(由themeforest上的模板提供)文件。 包括他们在标签内似乎没有工作。 任何想法有什么不对?

如何从计算的属性Vue.js访问数据

我使用Vue.js,当我尝试从计算属性中的数据访问variables时,它返回undefined 。 代码如下: <script> export default { name: 'app', data: () => { return { lang: 'sp' } }, computed: { langEn: () => this.lang === 'en', langSp: () => this.lang === 'sp' } } </script> 这是一个NPM项目。 并在.vue文件中。 这样使用时可能会有不同的performance? 谢谢您的帮助

Webpack,vue.js和组件捆绑分离

我们正在尝试构build一个在客户端使用vue.js的“可插件”Java Web应用程序。 一般描述 假设我们想要得到下面的服务器端应用程序简化架构,没有在生产中使用NodeJs(使用Java和Osgi,但在我看来这并不重要,它可能是PHP,.Net或者其他): 一个主要的Web应用程序,其中包括:vuejs2,路由器和一些通用的依赖项(bootstrap,jQuery等),在客户端, 许多Web应用程序插件,其中包括:附加和/或可选的vue.js组件和第三方依赖项。 我们想要什么 webapp执行检查服务器端可用的webapp插件的工作,然后在索引文件中公开适当的JS文件。 例如 : app.js:主要的webapp加载器和一般的依赖关系, pluginA.js:由服务器端插件“A”提供的vue.js组件, pluginB.js:由服务器端插件“B”提供的vue.js组件。 整个webapp不是通过nodejs构build的,而是使用node和webpack分别构build3个示例。 约束 我们如何才能实现这些插件的构build过程: 我们希望避免javascript构build过程必须同时调整应用程序的所有部分: 检查 ,我们有1个embedded式vue应用程序,每个webapp插件,Maven运行每个webapp插件和服务器端的节点构build过程做的工作分开揭露所有的3个文件, 插件JS文件只包含他们想要提供的构buildvue组件和第三方依赖关系: 未选中 ,所有3个输出文件夹都包含所有的JS依赖关系。 思路 对于每个webapp插件,我们认为我们需要find一种方法来构buildwebapp插件的所有.vue文件,并从输出文件中排除所有其他依赖项。 因为我们对节点和vuejs世界是新的,我们怎么能实现呢? 谢谢你的帮助。

逻辑不工作后,然后

我有一个login终点,回应我一个JSON。 我使用vue-router进行POST,然后在localStorage中存储一个令牌,但在POST之后,json显示在屏幕上: {"success":false,"message":"Login ou senha inválidos!"} 它应该返回页面login,并带有消息 这是代码: var vmLogin = new Vue({ el: '#login', data: { email: '', msg: '', password: '' }, beforeCreate: function () { if(localStorage.getItem("timeTaskToken") !== null) { window.location.href = '/' } }, methods: { getLogin: function (e) { this.$http.post('/login', {email: this.email, password: this.password}).then((response) => { alert('teste!'); if(response.body.success === true) { […]

vuejs 2 axios把,删除

我有一些没有答复的问题,我有一个像下面这样的Axios的示例Vuejs: updateItem: function () { var obj = {'name': this.name, 'dob': this.dob, 'gender': this.gender} // console.log(obj) var strngObj = qs.stringify(obj) this.axios.put('http://localhost:3000/crud/update/', this.update_id, strngObj, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } } // emulateJSON: true // fix cannot post as form data and urlencoded ).then((resp) => { if (resp.data.log === 'update success !') { this.items.push(resp.data.data) alert(resp.data.log) } […]

Highcharts-more.js在vue-cli项目中不起作用

这几个星期我在一个vue-cli项目上工作,我正在尝试做一个这样的极坐标图: https : //www.highcharts.com/demo/polar-spider 由于这个图表需要highchart-more文件,因此我使用npm安装并导入了highcharts和highchart-more库。 但是,导入这两个文件后,我在我的铬控制台中得到以下错误,并不能加载高图。 错误 highcharts-more.js?7b43:8 Uncaught TypeError: p is not a function at eval (eval at <anonymous> (app.js:874), <anonymous>:8:212) at eval (eval at <anonymous> (app.js:874), <anonymous>:11:205) at eval (eval at <anonymous> (app.js:807), <anonymous>:39:67) at Object.<anonymous> (app.js:807) at __webpack_require__ (app.js:658) at fn (app.js:86) at Object.<anonymous> (app.js:1182) at __webpack_require__ (app.js:658) at app.js:707 at app.js:710 […]