Vue 开发步骤

搭建Vue开发环境的步骤

 

1. 安装nodejs

# 最新稳定版
$ npm install vue -g

查看版本

node -v
npm -v

2. 全局安装脚手架工具vue-cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli
npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载
npm install vue-cli -g

创建一个项目： 

vue create my-project
# OR
vue ui

3. 查看版本号

vue --version
vue -V

4. 若没有安装webpack，则先安装webpack

npm install webpack -g
webpack -v

安装最新版本
npm install --save-dev webpack

如果你使用 webpack 4+ 版本，你还需要安装 CLI
npm install --save-dev webpack-cli

5. vue 项目初始化

vue init webpack my-project
vue create my-project
cd my-project
npm install

6. 运行项目

npm run dev

'vue' 不是内部或外部命令，也不是可运行的程序

npm config list

npm install -g @vue/cli

7. 结束运行项目

ctrl + c

8. vue项目目录说明

build：项目构建(webpack)相关代码

config：配置目录，包括端口号等

node_modules：npm加载的项目依赖块

src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

assets: 放置一些图片，如logo等

components：该目录里存放的我们的开发文件组件，主要的开发文件都存放在这里了

App.vue：项目入口文件

main.js：项目的核心文件

router：路由配置目录

static：放置一些静态资源文件

test：初始测试目录，可删除

.xxxx文件：这些是一些配置文件，包括语法配置，git配置等

index.html：首页入口文件

package.json：项目配置文件

README.md：项目的说明文档，markdown 格式

9. bootstrap-vue

# With npm
npm install vue bootstrap-vue bootstrap

# With yarn
yarn add vue bootstrap-vue bootstrap

10. vuex

npm install vuex --save

11. 打包方式：

npm run build