vue--学习第一天

[toc]

环境:centos
tips: 可以将npm 换成cnpm 加快安装速度,

安装vue

yum install npm
npm -v
npm install vue

image.png

image.png

安装vue脚手架 vue-cli

vue-cli脚手架是Vue.js提供的一个官方命令行工具，用于快速搭建大型单页应用。

npm install --global vue-cli

image.png

创建一个基于webpack模板的新项目，名称为my-project

vue init webpack my-project

image.png

使用cd命令进入项目my-project中，并安装项目依赖项,使用npm run dev运行项目

cd my-project
npm install
npm run dev

image.png

image.png

Vue 项目文件目录结构

image.png

• （1）build文件夹保存webpack的基本配置，config文件夹保存项目基本配置。
• （2）node_modules是npm加载的项目依赖的模块
• （3） src目录是我们要开发的目录，如下图所示

image.png

assets: 放置图片
components：放置组件文件
App.vue: 项目的入口文件
static 文件夹放置静态资源目录
index.html 首页
package.json 项目配置文件

【《Vue.js前端开发技术》学习笔记】