vue学习系列-初始化项目

vue是一套用于构建用户界面的渐进式框架，可以快速上手。在这里我们使用vue-cli来进行vue学习。在使用vue-cli前，你需要先安装nodejs和对nodejs的npm的一些命令进行学习。

安装nodejs

window上安装nodejs

直接去 nodejs官网 进行下载

mac上安装nodejs

mac上可以先安装brewhome，然后使用brewhome下载nodejs

brew install node

在这里，推荐一下mac上一个很好用的管理npm版本的工具nvm，也可以使用brewhome进行下载

brew install nvm

nvm的一些好用的命令可以看我的另一篇 文章

npm基本命令

1、初始化项目（生成package.json）

npm init -y

2、添加依赖

npm install [package]@[version] (--save/ --save-dev /-g)
或者 
npm i [package]@[version] (-S/-D/-g)

• [package]@[version] package为npm包名，后面的@[version]可选，没有的时候默认安装最新版本
• -S/-D,-S是–save的简写，-D是–save-dev的简写，-S与-D的区别就是-S会被打包到运行环境中去，-D只是在开发中使用
• -g是-global的简写，这个选项会被npm包安装到全局去，一般用于一些在命令行使用的npm包，比如vue-cli、create-react-app
  3、删除依赖

npm uninstall (-g) [package]

4、更新依赖

npm update (-g) [package]

安装vue-cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装完后，可以运行 vue --version 进行测试，如果能输出类似 @vue/cli 4.1.1 的字样，那恭喜你，vue-cli已经安装成功了！

为了方便学习，这里给出了 vue-cli官网 地址

创建一个vue项目

在你的项目目录运行

vue create my-project

接下来选择默认选项，运行完后，就生成了一个使用vue-cli创建的vue项目了

项目结构

|-node_modules			// 使用npm下载的依赖文件
|-public						
	inddex.html				// 项目入口html
|-src								
	|-assets					// 静态资源
	|-components			// 组件文件夹
	App.vue					// 根组件文件
	main.js						// vue项目入口js文件
 .gitignore					// git忽略提交配置
 babel.config.js			// babel配置
 package.json				// 项目配置信息
 README.md				// 项目描述文档

命令说明

项目启动

npm run serve

项目打包

npm run build