vue部署

最新推荐文章于 2024-07-02 22:05:51 发布

benben0729

最新推荐文章于 2024-07-02 22:05:51 发布

阅读量296

点赞数

文章标签： vue 部署

本文链接：https://blog.csdn.net/benben0729/article/details/83990409

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

安装

npm 安装

npm install vue
#直接下载使用
https://vuejs.org/js/vue.min.js

cnpm安装

npm install -g cnpm --registry=http://registry.npm.taobao.org

vue-cli 脚手架

cnpm install -g vue-cli

使用脚手架构建项目

#首先cd到自己指定目录,执行
vue init webpack <目录名称>
#注意在安装是不启用Eslint，否则开发过程中缩进问题很头疼
cd <目录>
#安装依赖包（package.json）
cnpm install
cnpm run dev 
#去浏览器打开localhost:8080
#这里简单介绍下 npm run dev 命令，其中的“run”对应的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一个快捷方式。
#项目打包
cnpm run build

目录结构

目录	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
assets:	放置一些图片，如logo等。
components:	目录里面放了一个组件文件，可以不用。
App.vue:	项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
main.js:	项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

vue缩进报错

#不开启Eslint即可，在使用vue-cli搭建项目的过程中不启用Eslint
#/router

实例配置

#主要是在src下的conmponents下进行开发
#src/router/index.js下配置
import Vue from 'vue'
import Router from 'vue-router'
import Header from '@/components/header'
import movieList from '@/components/movieList'
import cinemaList from '@/components/cinemaList'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'movieList',
      component: movieList
    },
    {
      path: '/movieList',
      name: 'movieList',
      component: movieList
    },
    {
      path: '/cinemaList',
      name: 'cinemaList',
      component: cinemaList
    }
  ],
  history: true
})

# /config/index.php中配置代理 proxyTable

#/src/main.js 修改入口文件
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Home from './pages/home'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<Home/>',
  components: { Home }
})