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