Vue项目的安装
-
创建项目
首先要安装 Vue cli 和 node
安装 Vue cli npm install -g@vue/cli 或者 yarn global add @vue/cli
安装node 在node.js官网进行安装
创建项目分为以下三种方式 点击查看详情
- 直接运行命令 vue create 项目名称 创建项目
- 通过 vue ui 命令打开浏览器窗口 创建项目
- 使用 vue init webpack 项目名称 创建项目
三种创建项目的区别
-
vue create : 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与vue-cli2项目结构不同，配置方法不同
-
vue ui : 这个命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程 在这里可以挑选你需要的一些插件，也可以按照自己的需求 预设插件和基本的配置，在里面还可以看到自己下载了那些插件
-
vue init : vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名
查看vue版本和node版本
node版本输入命令 node -v
vue查看版本在 package.json 里面的dependencies就可以看到了
-
项目里文件的作用
| 文件名 | 作用 |
|---|---|
| node_modules | npm install 下载的依赖包 |
| public | 我们打包后需要依赖的html模板 |
| src | 我们的开发的页面文件所放的文件夹 |
| src/assets | 静态资源文件夹，如果图片放在这里是不能通过v-for标签渲染到页面上的 |
| src/components | 此项目公共组件 |
| src/router | vueRouter |
| src/store | Vuex |
| browserslistc | 帮助css属性兼容不同浏览器 |
| gitignore | 配置不需要上传的文件 |
| package.json | 项目的核心配置记录 |
| README.md | 相当于这个项目的笔记本，记录这个项目的备注事项 |
| yarn.lock | 记录之前安装过的依赖的版本 |
启动项目的命令 通过
npm run serve启用项目
更该启动命令可以通过 package.json 里面的 scripts 下面的 serve 进行修改
启动项目时就打开浏览器
在 package.json 里面的 scripts 下面的 serve 后面加一个 --open
