vue脚手架3创建项目（vue脚手架创建项目怎么打开）

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

本文目录一览：

• 1、使用vue-cli（vue脚手架）快速搭建项目
• 2、构建实用VUE3项目
• 3、基于 VueCLI 搭建自己的 vue 项目脚手架
• 4、vue2/vue3环境搭建
• 5、vue项目完整搭建步骤
• 6、vue脚手架2.0和3.0创建项目的区别？

使用vue-cli（vue脚手架）快速搭建项目

下面整个过程是基于已经安装node.js和cnpm的基础上，node.js如何安装就不在这里详说了。如何全局化安装cnpm，这里简单提一下：(淘宝镜像命令)

其实对于安装vue-cli，使用npm命令和cnpm命令都是可以的，个人觉得使用npm安装的比较慢，而且很可能会因为网络问题而出错，所以还是觉得使用cnpm稳一点。

（1）全局安装 vue-cli ，在命令提示窗口执行：

（2）安装vue-cli成功后，通过cd命令进入你想放置项目的文件夹，在命令提示窗口执行创建vue-cli工程项目的命令：

通过vue-cli搭建一个vue项目，会自动生成一系列文件，而这些文件具体是怎样的结构、文件对应起什么作用，可以看看下面的解释：

构建实用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+"/"

}

}

基于 VueCLI 搭建自己的 vue 项目脚手架

VueCLI 提供了非常完善的工程化解决方案.我们可以基于 VueCLI 的 preset 来定制自己的项目.由于部署系统的不同,团队习惯不同等原因,我们需要在 VUECLI 提供的默认方案上做一些修改,这些修改可以通过 preset 保存下来,方便后续创建相同配置的项目.

vue create 可以通过 --preset 来指定preset 的位置,可以是本地路径也可以是远程地址,比如 gitlab 等. 定制好 preset 后就可以通过 vue create --preset myPresetAddress project-xxx 来一键创建项目了.

vue preset 主要包含 preset.json(必需) generator.js prompts.js 三个文件.其中 preset.json 是必须的.这里包括 VUECLI 插件列表和对应的配置.

例如

generator.js 用于在新项目里创建文件和修改原因文件,以适配自己的工程化需求.比如生产 jsconfig.json 配置,修改 .editorconfig 等.

prompts.js 用于在命令行给出一些可交互提示,把选项传递给 generator,提高脚手架的适用性.

vue2/vue3环境搭建

检查是否安装成功

Vue build == 打包方式，回车即可；

　 Install vue-router == 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；

　 Use ESLint to lint your code == 是否需要 js 语法检测 目前我们不需要 所以 n 回车；

　Set up unit tests == 是否安装 单元测试工具 目前我们不需要 所以 n 回车；

　Setup e2e tests with Nightwatch == 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；

1、build：构建脚本目录

1）build.js == 生产环境构建脚本；

2）check-versions.js == 检查npm，node.js版本；

3）utils.js == 构建相关工具方法；

4）vue-loader.conf.js == 配置了css加载器以及编译css之后自动添加前缀；

5）webpack.base.conf.js == webpack基本配置；

6）webpack.dev.conf.js == webpack开发环境配置；

7）webpack.prod.conf.js == webpack生产环境配置；

2、config：项目配置

1）dev.env.js == 开发环境变量；

2）index.js == 项目配置文件；

3）prod.env.js == 生产环境变量；

3、node_modules：npm 加载的项目依赖模块

4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；

2）components：组件目录，我们写的组件就放在这个目录里面；

3）router：前端路由，我们需要配置的路由路径写在index.js里面；

4）App.vue：根组件；

5）main.js：入口js文件；

5、static：静态资源目录，如图片、字体等。不会被webpack构建

6、index.html：首页入口文件，可以添加一些 meta 信息等

7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息

8、README.md：项目的说明文档，markdown 格式

9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等

1.解决vue不能自动打开浏览器的问题：当我们输入npm run dev，运行项目，命令行提示我们运行成功，但是浏览器也没有自动打开，只能自己手动输入。

改完之后重启一下即可。

2.为了避免端口冲突，也可以修改port，打开目录同上

更改成功：

1. 如果你已经全局安装了旧版本的 vue-cli(1 或2)，你需要先通过

npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它(卸载脚手架)

2.全局安装 npm install -g @vue/cli 或 yarn global add @vue/cli

3.全局安装了vue-cli3 但是还想用vue-cli2 ,添加一个桥接工具 命令：npm install -g @vue/cli-init

4.可以进行创建项目了

vue-cli2: 命令：vue init webpack my_project

vue-cli3 命令：vue create my-project

3.版本不同 安装方式也不同

vue-cli2: 命令 npm install -g vue-cli

vue-cli3: 命令 npm install -g @vue/cli

3.版本不同的创建项目方式不同

vue-cli2: 命令：vue init webpack my_project

vue-cli3 命令：vue create my-project

4.vue-cli2和vue-cli3 安装完后的 项目目录不一样

5.安装指定版本的vue

npm install -g @vue/ cli@3.12.1

vue-cli3.0项目目录结构

vue-cli2.0项目目录结构

vue-cli4.5.15 的vue2项目目录

vue项目完整搭建步骤

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

下载并安装node

下载地址为：

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

检查node是否安装成功

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

在终端输入以下命令：

检测cnpm是否安装成功

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

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

进入项目

安装依赖

此时项目中会多了一个node_modules

启动成功

vue脚手架2.0和3.0创建项目的区别？

一、生成项目命令

安装3.x版本的Vue脚手架： npm install -g @vue/cli ,创建Vue项目命令： vue create 项目名称 或基于ui界面创建Vue项目,命令： vue ui

基于2.x的旧模板，创建Vue项目 npm install -g @vue/cli-init , vue init webpack 项目名称

二、目录的区别

3.0版本根目录新增了 babel.config.js和.browserslistrc public文件夹

src文件夹中多了views文件夹，相比2.0，在index.js变为了router.js

2.0版本相比3.0版本 有build和config文件夹等，src文件夹中有router文件夹，里面有index.js

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