使用VUE脚手架搭建VUE项目

1、新建文件夹

2、进入新建的文件夹，输入npm i @vue/cli -g

或者：npm i "@vue/cli" -g

3、检查是否安装vue-cli : vue -V

会显示脚手架vue-cli的版本@vue/cli xxx

4、创建项目：

vue create name---在之前创建的目录中创建

选择default-----按回车键

5、启动项目：

1）进入当前文件目录

2）npm run serve

3）在浏览器输入：http://localhost:显示的端口号

6、项目结构：

1）README.md

2）package.json：1.有script脚本 npm run serve 2.项目所有需要的依赖

3）package-lock.json：锁定依赖的脚本

4）babel.config.js：了解，是在balel在转换es6代码时的配置

5）.gitignore：git的忽略文件，指定的文件和目录不提交到git仓库

6）node_moudles：node js的包文件

7）public

1.favicon.ico：网站缩略图

2.index.html：项目中唯一的一个网页，内部有一个#app的div

8）src：最重要的文件夹，存储项目的源代码

1.main.js：是整个项目的入口文件

2.App.vue：是一个Vue的单文件组件（只要有.vue文件，即为一个独立的组件，组件中有三个标签）

入口文件main.js：

（1）import Vue from 'vue' 等同于引入Vue.js<script src="./js/vue.js"></script>

（2）import App from './App.vue'引入根组件App，App是单页面应用中的文艺根组件，以后开发的组件都会放在App内部

（3）Vue.config.productionTip = false---影藏开发模式的提示

（4）创建Vue的根实例

//h是一个渲染dom的回调，将App组件渲染到id=app的dom结构中

//$mount('#app'):#app即为Public文件夹中index.html中的<div id="app"></div>

new Vue({

render: h => h(app)

}).$mount('#app')

6、安装anxios库

npm install axios -S

使用VUE脚手架搭建VUE项目相关推荐

在手机上查看和测试vue脚手架搭建的项目
① 打开cmd输入命令ipconfig,获取到本机的IP地址: ② 得到IPV4值,然后用该值替换localhost: ③ 找到vue项目的config文件夹下的index.js文件,打开后将h ...
vue脚手架搭建项目_复习之vue脚手架搭建项目的两种方法
安装脚手架 node 版本要求: > 8.9 . 关于旧版本:如果在这之前已经全局安装了旧版本的vue-cli(1.x 或 2.x),那么需要先卸载掉. 卸载旧版本运行:``npm uninst ...
vue脚手架搭建项目的兼容性配置
使用vue-cli搭建项目,面临着解决ie兼容性问题(ie9+),因为ie浏览器并不支持es6语法等. 首先安装babel-polyfill,解决ie不支持promise对象的问题 npm insta ...
Vue 脚手架搭建目录及文件详解
vue脚手架搭建在各大前端网站都有详解,这里就不多作介绍,此文章主要介绍脚手架搭建后的目录结构,以及配置文件的详解. 1. 目录结构目录结构如下: 我们来介绍一下这些目录: 一级目录 build: ...
Vue 脚手架生成的项目结构分析||Vue 脚手架的自定义配置
Vue 脚手架生成的项目结构分析 Vue 脚手架的自定义配置
vue = 什么意思_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
7004.vue脚手架快速生成项目
文章目录 1 Vue脚手架可以快速生成Vue项目基础的架构. 1.1 安装3.x版本的Vue脚手架: 1.2基于3.x版本的脚手架创建Vue项目: 1.3 分析Vue脚手架生成的项目结构 2 vue脚 ...
cli vue 卸载_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目
Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目源码(欢迎star): 前端项目代码后端项目代码系列文章: Vue整合SpringBoot项目实战之后端业务处理 ...
Vue CLI3搭建的项目中，如何给文件夹起别名?
因为这段大年的时间里,好久没写博客了,是好懒散了.真的是少年易老学难成,一寸光阴不可轻啊.浪费一秒钟是一秒钟的罪过. 我们使用Vue CLI3搭建的项目中,在vue.config.js文件中,在给文件 ...

使用VUE脚手架搭建VUE项目

使用VUE脚手架搭建VUE项目相关推荐

最新文章

热门文章