vue项目创建（vue项目创建UI）

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

本文目录一览：

• 1、创建Vue客户端项目步骤
• 2、使用vue创建项目
• 3、构建实用VUE3项目
• 4、vue-cli起项目步骤
• 5、Vite创建vue项目简单几步
• 6、vue项目创建和部署使用

创建Vue客户端项目步骤

1、使用npm init vue@latest创建项目，除了不轿渗支持TypeScript和JXT外都选支持

2、修改.eslintrc.cjs，增加windows下换行：

3、修改package.json中运行端口号，防止冲突：

"dev": "vite --port 5149",

4、在vite.config.js中增加配置server：

5、安装其它支隐帆羡持包灶拍

npm install bootstrap

npm install @microsoft/signalr

npm install oidc-client

[img]

使用vue创建项目

1.使用 npm install -g @vue/cli 全局安装vue

2.使用 vue -V 查看雀行当前版本号

1.1 输入命令 vue create 项目名字

第一个放独立空岁瞎文件夹，第二个放package.json

7.填写项目描述

不用写。

8.CD到创建的项目文件夹斗空里运行 npm run serve

构建实用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-cli起项目步骤

一、 安装 node.js

安装肢唤完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。

二、安装webpack

             命令：npm install webpack -g

             安装完成后使用webpack -v，如果出扰码现相应的版本号，则说明安装成功。

三、安装 vue-cli

             命令：npm install -g vue-cli

             安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功。

             如果提示无法识别 vue，可能是 npm 版本过低，可使用 npm install -g npm 来更新版本

四、使用vue-cli来构建项目

1、在硬盘中找一个放项目的文件夹

2、在文件夹下打开命令盘，输入命令

Vue-Project是我们自己设置的项目名称，项目名称不能用中文

       命令：vue init webpack Vue-Project

3、进入项目工程目录

4、安装项目所需依赖  npm install

5、安装 vue 路由模块 vue-router 和网络请求模块 vue-resource

 缓饥哪       命令：npm install vue-router vue-resource --save

创建完成的项目目录，如下图

各个目录的作用

最后一步启动项目

         命令：npm run dev

启动成功，打开浏览器8080窗口，页面如图所示

关于vue create 和vue init webpack的区别 ？

vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档 网页链接 。vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置)

或

另一种：

Vite创建vue项目简单几步

1、安装 npm init @vitejs/app

2、选州档择框架

3、安装依赖 npm install（npm i）

1、安装： npm i vue-router@next

2、 新建 router-index.ts 文件

[图片上传失败...(image-2fb130-1638707524295)]

3、写入

4、在mian.ts文件中引入

[图片上传失败...(image-53c18a-1638707524295)]

1、安装 npm install --save-dev sass

就这么一句安装就可以使瞎升用了，用vuecli的时候，还要安装sass-loader、node-sass等，但是vite只需要安装sass就可以了

2、测试

[图片上传失败...(image-4725de-1638707524295)]

[图片上传失册神乱败...(image-aa6793-1638707524295)]

3、如果需要全局使用sass变量，在vite.config.js文件中新增

vue项目创建和部署使用

这周花了两天时间简单研究了下目前非常流行和应用广泛的前端js框架 vue ，作为一个基础的了解。 vue 的作者是国人尤雨溪。官网描述 vue 是一套用于构建用户界面的渐进式框架，可以自底向上逐层应用，它核心只关注视图层，易于上手和便于整合。同时，其可以与现代化的工具链和各种类库结合，用以创建复杂的单页应用。其特点主要有以下几点：

基于 vue 的流行度，日常项目前端有在使用，遂记录这篇文章，主要讲从环境搭建到使用样例。在学习中，体验和完成了一个功能稍微丰富的例子，为简洁起见，本期只展示官方默认例子。鉴于本地也没搜清有nodeJs环境，所以直接从环境搭建开始。

配置淘宝源，注意 -g 是全局安装

完成之后将使用 cnpm 替换 npm ，验证 cnpm :

之后的依赖安装就可以使用 cnpm install package 或简写 cnpm i package 进行。没有代理的情况下，相比npm国内要快很多，也不容易失败。注意可以使用 -g -D --save 等参数设置安装范围。

安装 vue-cli

vue-cli 是官方提供的项目脚手架（可以看做类似服务端开发的maven用于构建的部分），用来进行项目构建等操作，后面我们会继续介绍。它还提供了一个图形界面，用来执行和进行相关配置，对于新手等只关心结果的人，减少了很多的学习成本。

安装命令

验证安装

之后我们看到一个 hello-world 的文件夹，里边包括默认生成的一些配置和 App.vue , main.js 等程序文件，如下镇漏辩是支持 vue-router 路由 （控制页面切换等操作） 的一个 main.js 具体内容

注意使用路由时，不要忘记在主模板里添加 router-view御缺/router-view 标签，表示路由切换的位置，否则路由页面无法正常展示。

先保持默认的demo内容不变，运行如下命令启动一个本地服务来运行

之后会启动对应的服务，通过地址和端口访问，就能看到默认的页面。

既然提到了部署，默认的部署使用 npm/cnpm 进行，如下命令，输出内容在 /dist 目录。

可以使用参数来设置，得到符合不同需要的编译结果。之后即可以将打包的文件部署到服务器上。

这里说下 vue-cli 脚手架所带的图形界面编译打包管理，可使用如下命令开启，然后按照提示，加入需要的项目，可以查看仪表盘展示，进行插件管理，依赖管理，编译配置，以及项目构建的操作，十分方便。

启动 vue-cli 图形界面

然后按照提示访问即可。

以上就是本期的内容，主要是一些初期的准备工作。目前整体了解了vue相关，如渲染，组件化，路由等。总体来说依托 vue 提供的丰富文档和比较好用的工具，以及本身非常高的流行度，在尝试稍微复杂的功能或者遇到问题时，容易找到相关满意的解决方式，总体来说还是比较适合入门的。后续看时间能多熟悉些实际项目，真正用于搭配后端做个可用的项目。

1. Vue.js介绍

2. Vue CLi脚手架

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