Vue项目搭建

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1、环境搭建

安装node

官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/

安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装脚手架

cnpm install -g @vue/cli

清空缓存处理

npm cache clean --force

2、项目的创建

创建项目

vue create 项目名

// 要提前进入目标目录(项目应该创建在哪个目录下)

// 选择自定义方式创建项目，选取Router, Vuex插件

启动/停止项目

npm run serve / ctrl+c

// 要提前进入项目根目录

打包项目

npm run build

// 要在项目根目录下进行打包操作

3、认识项目

-node_modules  项目依赖包()

-public

    -index.html  vue项目都是单页面开发

    -facicon.ico  图标文件

-src 项目目录

    -assets  存放静态文件

    -components  组件(小组件)

    -views  页面组件

    -App.vue  根组件

    -main.js  项目的入口

    -router.js 路由关系

    -store.js   Vuex存放数据

-package.json  项目依赖的第三方模块

-node_modules:项目依赖(以后项目要传到git上,这个不能传)

-publish--->index.html  是总页面

-src :项目

-assets:静态资源

-components:组件

-views:视图组件

-APP.vue:根组件

-main.js :总的入口js

-router.js :路由相关,所有路由的配置,在这里面

-store.js  :vuex状态管理器

-package.json:项目的依赖,npm install 是根据它来安装依赖的