vue项目（vue项目结构）

本篇文章给大家谈谈vue项目，以及vue项目结构对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue项目完整搭建步骤
• 2、5分钟看懂VUE项目
• 3、如何打包Vue项目
• 4、Vue 项目创建基础配置
• 5、构建实用VUE3项目

vue项目完整搭建步骤

为了让一些不太清楚搭建前端项目的小白，更快上手。今天我将一步一步带领你们进行前端项目的搭建。前端开发中需要用到框架，那vue作为三大框架主流之一，在工作中很常用。所以就以vue为例。指档

下载并安装node

下载地址为：

在 nodejs官网下载最新版稳定版的node.js安装，自带了npm工具 ,推荐下载左边的。

检查node是否安装成功

为了更快安装，可以使用淘宝的镜像：

在终端输入以下命令：

检测cnpm是否安装成功

vue-cli是vue脚手架工具缓租，方便打包，部署，测试等。

进入你的项目目录，创建一个基于 webpack 模板的新扰逗兆项目: vue init webpack 项目名

进入项目

安装依赖

此时项目中会多了一个node_modules

启动成功

[img]

5分钟看懂VUE项目

VUE是前端开发框架。诞生于2014年吧。

原始的前端开发框架需要工程师写html、写css、写javascript(js)。js是脚本语言，浏览器可以运行js来执行一些js支持的动作，例如点击反馈，下拉菜单、操作html的DOM元素之类。这样开放效率就很低了。

后来诞生了一些前端开发框架，VUE就是其中之一。目前在国内前判尺端开发中，特别是手机app的h5页面的开发部分，被很多公司采用。

使用VUE开发的时候，不需要js直接操作html元素，只需要管理js的变量值，html会自动更新这些值。传统的html配合js能完成的功能，VUE都给山冲衫出了实现方案，开发只写简单的html和js语句就可以实现。

VUE开发的工具一般是visio stdio code（vscode），稍微适应两天就可以熟练应用了。还是很强大的。

但是vscode本身只是编辑器，开发编译类语言需要自己配编译环境，具体我没配过。

前端开发不需要配编译环境了，只需要把需要的各种库、工具在命令行界面安装就行。具体过程网上搜“从零开始搭建vue项目”。

刚建立好的项目一定是下面这种目录结构（ranktable.vue是我后加的

这对于新手村的人会引起头晕呕吐，老子啥都没写就出来这么多文件，不但数量不少，文件种类还齐全。

学习VUE别想一下吃的太多，除非你本身前端经验丰富。否则先看懂红色箭头的几个文件吧，看懂这几个就算入门了。看的顺序严格按照下面这样。

index.html-main.js-App.vue-index.js-HelloWorld.vue

我将这几个文件大概讲一讲，你就能有个清晰的脉络了。

一、index.html

!DOCTYPE html

html

head

meta charset="utf-8"

meta name="viewport" content="width=device-width,initial-scale=1.0"

titletradedatapy/title

/head

body

div id="app"/div

/body

/html

页面开发当然是要有html了，VUE开发也不例外。这个html就是整个项目的入口了。只不过是body里面过于简单。div id="app"/div表示本html绑定了一个id为app的VUE对象。

二、main.js

new Vue({ //new Vue语句就是定义了一个VUE对象

el: '#app', //vue对象的id是app

router,

components: { App }, //vue的组件名是APP

template: 'App/' //template 名是APP

})

这就定义了一个app的VUE对象，index.html就可以找到它了。

三、App.vue

template

div id="app"

router-view/

/div

/template

script

export default {

name: 'App' //export 了名为App的组件，main.js就可以找到它了

}

/script

上面的template都理解为html的一部分片断就行了，片断可以拼接到html对应的位置，构成一个有内容的完整的页面。img src="./assets/logo.png"这句被我注释了，否则页面会显示这个图片的。下面的route-view/部分是路由，根据用户的url不同，会路由到不同的vue文件，进而展示不同的页面内容。

四、index.js

项目里有不只一个index.js，一定看准了，我要讲解的是router目录下的index.js.

//这里的配置决定了App.vue里逗腔router-view/位置会展示什么内容

export default new Router({

routes: [

{

path: '/', //当用户访问 根目录也就是默认目录会被路由到HelloWorld组件，

//这个组件的所有内容会被在App.vue里router-view/显示出来

name: 'HelloWorld',

component: HelloWorld

},

{//当用户访问 会显示ranktable.vue内容

//ranktable.vue是我后加的

path: '/ranktable',

name: '/ranktable',

component: ranktable

}

]

})

五、HelloWorld.vue

最后看看这里有什么

template

div

原来的内容被我删除了，现在页面显示这句话。

/div

/template

script

/script

vscode命令行执行npm run dev，看见下面说明成功了，将地址贴进浏览器

Compiled successfully in 983ms 15:43:26

I Your application is running here:

如果想要更复杂的功能，在helloworld.vue实现就行了，比如我要一个填表查询功能，里面改成

template

div

group title="城市"

selector placeholder="请选择城市" v-model="demo01" title="" name="district" :options="list" @on-change="onChange1"/selector

/group

group title="街道"

selector placeholder="请选择街道" v-model="demo03" title="" name="district" :options="list4" @on-change="onChange3" @click.native="onClickpz"/selector

/group

group title="小区"

selector placeholder="请选择小区" v-model="demo02" title="" name="district" :options="list3" @on-change="onChange2" @click.native="onClickheyue"/selector

/group

group title="日期"

selector placeholder="请选择日期" v-model="demo04" title="" name="district" :options="list5" @on-change="onChange4" @click.native="onClickdate"/selector

/group

group title="统计类型"

selector placeholder="请选择统计类型" v-model="demo06" title="" name="district" :options="list6" @on-change="onChange6"/selector

/group

div style="padding:15px;"

x-button type="primary" @click.native="getValue('plainValueRef')"查询/x-button

/div

/div

/template

script

import { Selector, Group, Cell, CellBox, XButton } from 'vux'

此处省略很多东西

/script

这个例子有点复杂，需要下面script里实现很多内容，引入vux的一些组件，vux大家可以自行研究。效果是这样的

如何打包Vue项目

Vue项目编写完成后，一般需要打包压缩成新的文件，下面简单介绍一下是如何对Vue项目打包的。

工具/稿腔原料npm方法/步骤1npmrunbuild

2build进行中，一般这个过程需氏敬罩要一点点时间

3打包完成，可以看到有提示歼闹buildcomplete

4build完成时候可以在相中发现多了一个dist文件夹，里面包括一个css文件，js文件和index.html

5项目最终上线的内容是打包压缩的，也就是上面的dist文件，整个过程还是很简单的。

6需要注意一下，即使项目中仅仅修改了一丁点东西，都需要重新进行打包，执行上诉的操作。

Vue 项目创建基础配置

Vue 项目创建时候的一些基础配置小记：

CLI 即 @vue/cli 全局安装的 npm 包用于终端提供 vue 相关的拍烂指令，可用来创建工程、启动服务等；

CLI service 即 @vue/cli-service 开举扰发环境的依赖，构建于 webpack 和 webpack-dev-server，可用来serve 启服务、编译构建 build 工程、配置 css、配置 webpack 等；

CLI 插件可以集成一些架包快速配置项目等；

项目创建，cd 到指定的目录下，执行

创建项目 create 后会有几个袭答漏配置选项，具体如下：

1.use history mode for router - Y

即 vue-router 利用浏览器自身的 hash 模式和 history 模式特性实现前端路由

其中 hash 模式浏览器 url 地址中会带有 # 号，而history 则利用 html5 的 history interface 中新增的 pushState 和 replaceState 方法

2.Pick a CSS pre-processor - stylus

SCSS/SASS：scss 是 sass3 的新语法，完全兼容css3 且继承于 sass；sass 需 ruby环境，在服务端处理

LESS：借助 node.js 通过编译处理输出 css 至浏览器，同时兼容客户端与服务端运行

Stylus：用于给 node 项目进行 css 预处理支持，stylus 功能上更加强壮和 js 关系更加紧密

3.Pick a linter / formatter config - ESLint + Prettier

ESLint with error prevention only: 仅错误预防

ESLint + Airbnb config

ESLint + Standard config: 标准模式

ESLint + Prettier: 使用较多，推荐

4.Pick additional lint features - Lint on save

(·) Lint on save：保存即检查

( ) Lint and fix on commit： fix 和 commit 的时候才检查

5.Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) - In dedicated config files

In dedicated config files：独立文件中放置

In package.json：放在 package.json 中

6.Save this as a preset for future projects - N

是否记录本次创建工程的如上配置选项并起个名称

安装时可能需要的一些资源： nodejs 、 Homebrew

以上便是此次分享的全部内容，希望能对大家有所帮助！

构建实用VUE3项目

还没用几天VUE，就到3了，本文旨在记录构建一个实用项目模板昂。

1、自然是将VUE-CLI升级到最新版本此备亏啦（卸载旧的，安装zhui新的）

npm uninstall -g vue-cli

npm install -g @vue/cli

你要是想看看脚手架的版本，那敲这个

vue --version

2、构建你的项目吧

vue create myproject

进入配置的时候问你愿不愿意，你打YES就好

还有就是，既然想要VUE3的，记得选VUE3就好

到了这儿，一个原始的项目就有啦。

3、在项目目录中，建一个名叫vue.config.js的文件，并且在这个文件里导出一个对象。至于这个对象里森神的选项和配的值，那就又可以写一篇了

4、配置路由（和子路由）

1）安装好路由插件     cnpm i vue-router@next -D

2）在src目录下创建 router/index.js 

3）在根目录的main.js里面引入路由  import router from './router'

4)   在Vue对象中加入router的配置

import Vue from 'vue'

import VueRouter from 'vue-router'

import Login from '../views/Login.vue'

Vue.use(VueRouter)

  const routes = [

  {

    path: '/',

    redirect: '/login'

  },

  {

    path: '/login',

    name: 'Login',

    component: Login

  },

  {

    path: '/',

    component: resolve = require(['../views/Index.vue'], resolve),

    redirect: '/home',

    children: [

      {

        path: 'home',

        name: 'home',

        component: resolve = require(['../views/home/Home.vue'], resolve),

        meta: { title: '首页'}

      },

      {

        path: '/programCard',

        name: 'programCard',

        component: resolve = require(['../views/programCard/card.vue'], resolve),

        meta: { title: '路由1'}

      }

    ]

  }

]

const router = new VueRouter({

  mode: 'hash',

  base: process.env.BASE_URL,

  routes

})

export default router

5、安装VUEX并使用

1)安装vuex  cnpm i  vuex@next -D

2）在src目录下创建 store/index.js 

3）在根目录的main.js里面引入  import store from './store'

4)   在main.js里加入store的配置

6、配置axios

1)   安装vuex 滚辩 cnpm i  axios@next -D

2)   在src目录建立api/request.js,并在其中引入axios       import axios  from 'axios'

在request.js中创建axios实例

添加请求拦截器和响应拦截器

再将实例导出export

3)在src目录建立api/index.js,引用axios实例，并统一定义请求函数

7、在src下建立views目录和路由子目录home/Home.vue

8、在assets目录增加css 、iconfont、images、js目录，存放资源

9、根目录下建立static\global.js

定义常量 const API_ROOT='127.0.0.1:8081'

建立对象window.global={

url:{

apiUrl:"http://"+API_ROOT+"/"

}

}

关于vue项目和vue项目结构的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。