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 是根据它来安装依赖的

 

发布了96 篇原创文章 · 获赞 17 · 访问量 5510
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章