vue脚手架3创建项目（vue脚手架新建项目）
今天给各位分享vue脚手架3创建项目的知识，其中也会对vue脚手架新建项目进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
本文目录一览：
使用vue脚手架创建Vue项目并引入bootstrap-vue
1.Module build failed: Error: ENOENT: no such file or directory, open '包路径\bootstrap-vue\node_modules\core-js\modules\es.array.iterator.js'
2.Error: ENOENT: no such file or directory, open 'D:\ahao\studyPath\bootstrap-vue\node_modules\lodash\lodash.js'
3.VUE中使用BootstrapVue图片b-img标签路径显示不出图片问题
新建 vue.config.js ;安装 npm i vue-cli-plugin-bootstrap-vue ;配置vue.config.js后重新执行npm run serve
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项目完整搭建步骤
为了让一些不太清楚搭建前端项目的小白，更快上手。今天我将一步一步带领你们进行前端项目的搭建。前端开发中需要用到框架，那vue作为三大框架主流之一，在工作中很常用。所以就以vue为例。
下载并安装node
下载地址为：
在 nodejs官网下载最新版稳定版的node.js安装，自带了npm工具 ,推荐下载左边的。
检查node是否安装成功
为了更快安装，可以使用淘宝的镜像：
在终端输入以下命令：
检测cnpm是否安装成功
vue-cli是vue脚手架工具，方便打包，部署，测试等。
进入你的项目目录，创建一个基于 webpack 模板的新项目: vue init webpack 项目名
进入项目
安装依赖
此时项目中会多了一个node_modules
启动成功
Vue脚手架
在没有Vue脚手架的时候，我们需要手动搭建webpack项目、手动去配置vue，现在有了Vue脚手架，我们就可以通过命令行的形式快速生成vue项目的基础架构。其官网地址为：
安装 3.x 版本的 Vue 脚手架。
输入 vue -V 如果出现版本号，就说明安装成功。
脚手架安装成功之后，就可以通过脚手架创建vue项目了。
通过上面脚手架创建的Vue项目，使用 npm run serve 命令之后，打印如下：
使用 npm run serve 命令并不会自动打开浏览器，下面我们修改端口号，并且让执行命令之后自动打开浏览器。
注意： 不推荐使用这种配置方式。因为 package.json 主要用来管理包的配置信息，为了方便维护，推荐将 vue 脚手架相关的配置，单独定义到 vue.config.js 配置文件中。
总结 ：至此，使用脚手架创建项目的流程就完成了，如果想要把项目拷贝给别人，需要先把项目的 node_modules 文件夹删除，对方拿到项目之后，首先要cd到项目目录，然后执行 npm install 安装所有依赖项，然后再执行 npm run serve 就可以把项目跑起来了。如果想要再给项目添加新的依赖，可以cd到项目目录，然后执行 vue ui 打开GUI，在可视化面板中就可以给项目添加新的依赖了。
构建实用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脚手架3创建项目和vue脚手架新建项目的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
