Vue项目搭建

创建

在一个空文件夹下，输入命令：

cnpm i vuex@3

vue init webpack <project name>

npm install vuex@3.6.2

npm run dev

前端启动

之后启动的命令(下面的第一条只需输入一次，除非换了目录环境)：

npm install

npm run serve

后端启动

npm install

npm start

http://localhost:3000/

目录结构

build 项目构建(webpack)相关代码 config 项目相关配置，配置端口信息等 node_modules 项目依赖等 src>assets 放置一些图片 如项目的logo、icons src>conponents 项目的一些组件，如自定义组件 src>router 路由 src>App.vue 项目入口 src>main.js 项目核心文件 static 项目静态文件，图片、字体等 index.html 首页入口文件，可以添加一些 meta 信息或统计代码等 package.json 项目的配置文件，一般是依赖项配置

附录

报错

• idealTree:Taowu: sill idealTree buildDeps

  • 解决：

  • npm config get registry

  • npm config set registry https://registry.npm.taobao.org

• warning in ./node_modules/vuex/dist/vuex.esm-browser.js 1077:9-14 "export ‘watch’ was not found in ‘vue’

  • 解决：

  • npm uninstall vuex

  • cnpm i vuex@3

  • npm run dev

• vue引入ly-tab报错

  • 解决：

  • npm uninstall ly-tab #卸载最新版

  • npm install ly-tab@2.1.1

• swiper插件

  • 解决：

  • npm install vue-awesome-swiper@3.1.3 -S

• better-scroll插件

  • 解决：

  • npm uninstall better-scroll

  • npm install better-scroll@1.8.1 --save

  • 子元素比父元素高，必须添加在mounted中

  • 当dom更新完再加载betterScroll

    • this.$nextTick(() => { this.tBetterScroll = new BetterScroll(this.$refs.wrapper, { movable: true, zoom: true }) })

• 安装axios

  • 解决：

  • npm install axios -S