[JavaScript知识库]使用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

?