Vue-项目

一.环境搭建

1.安装node

• 去官网下载node安装包

• 傻瓜式安装

• 万一安装后终端没有node环境,要进行node环境变量的配置(C:\Program Files\nodejs)

• 可以通过node提供的npm包管理器安装vue脚手架

• 通过npm安装淘宝镜像cnpm,将nmp指令都修改为cnpm指令(npm install -g cnpm --registry=https://registry.npm.taobao.org)

2.安装全局vue脚手架

• 起管理员终端(mac: sudo)

• cnpm install -g @vue/cli

• 如果安装失败,检测网络,请npm缓存(npm cache clean --force)后重新安装

3.创建项目

• 采用可视化方式创建(vue ui)

• 命令行

1.打开终端
 2.去向目标目录(将项目创建在该目录)(cd 目标目录)
 3.指令创建项目(vue creat 项目名)
 4.选择自定义:Manually select features
 5.用空格选取所需插件:Router, Vuex
 6.采用Router的history...
 7.在目标目录创建一个项目名的文件夹,该文件夹就是所创的项目

4.启动项目

 1.进入项目目录
 2.启动服务器(npm run serve)
 3.退出服务器|刷新服务器(ctrl+c)
 4.项目完成后,在项目目标下可以进行项目打包发布,要提前做配置(npm run build)

5.项目目录

 dist: 打包的项目目录(打包后会生成)
 node_modules: 项目依赖
 public: 共用资源
 src: 项目目标,书写代码的地方
 -- assets:资源
 -- components:组件
 -- views:视图组件
 -- App.vue:根组件
 -- main.js: 入口js
 -- router.js: 路由文件
 -- store.js: 状态库文件
 vue.config.js: 项目配置文件(没有可以自己新建)

二.项目开发

1.vue.config.js

 module.exports={
 devServer: {
 port: 8888
 }
 }
 // 修改端口,选做

2.main.js

 // 不用修改
 // 采用之前的语法创建根实例
 new Vue({
 el: "#app",
 router: router,
 store: store,
 render: function (h) {
 return h(App)
 }
 })

3.*.vue