前端项目记事说

总想写点什么，但又不知道自己写什么好，自己设计原理图，自己开始些项目，自己动手操作，自己设计一个项目，自己一步一步动手开始，围绕着自己的思路一步一步开始写东西，不会落下每一步的流程，自己写出整个项目结构。为什么会有这么一个思路，你这个思路是怎么来的，你为什会想着设计这么一个项目，初衷是什么，你设计这个项目是为了实现一个怎样的功能，完成一个怎样的实现，你这项目应该是来自于现实灵感之中，还是来自于客户的需求，还是来自其他的一些东西，这个项目的灵感来自哪，你想要实现一些功能，你实现的这个项目相关的功能需要进行怎样的优化，你能做哪些优化，你这些优化是如何进行处理的。

项目的思路：那么我想做一个怎样的项目呢，我想要的是创新，一种超越前人的创新，我这个东西是来自哪里，来自生活中的灵感，来自于实现，我们的一切活动都是围绕着人进行的，为人而存在，无数人对一件事进行改进，一位天才先在先发现了一些苗头，之后又有几位天才发现一些苗头，之后是由天才将前面天才的东西总结起来，并做出相应的东西

你要做一个项目，这个项目的题材是从哪来的，这个项目未来的期望怎么样，他一上线能火吗，你是怎样去运营他的，你真正把他看做是一个有血有肉，值得你话心血去付出的孩子了吗，而不是一个项目，你要把他想成一个实实在在存在的，对，他就是存在那里，除了是存在那里之外，他还是一个应该被具体化的一个实体，你不应该只是将他当作一个作品，他应该是你的心血，值得你为他付出自己的努力，付出自己的血汗，你要把他尽可能地完美化，做到更好，而不是最好，永远没有最好，你要想着进步，在他上面实现，实现一些很好的列子。现在这个世界，每一个人都面临着许许多多的选择，在每一秒的每一刻都面临着许许多多的选择，因为每一秒所供我们选择的东西都太多了，比如说，我中午想吃什么，我该怎样吃，我是在学校食堂吃，还是去外面从，还是在美团上面点餐，我如果是在美团上面点餐，那么我中午该吃什么，是粥，米线，还是米饭，如果我是吃米饭，那么我是点哪一家，吃什么菜，怎样我才能尽可能地优惠一些，我该不该买红包呢，我要是买红包能优惠多少呢，这家的西红柿炒蛋好像不错，那家的好像也很不错，那我该这么办呢，等等，这些都是非常困扰我们的事情，我是一个在校生，我几乎每天点外卖，这样，我还是在为每天吃什么发愁，我身边的同学也在为每天吃什么发愁，那么基于这个思路，我们可不可以先推出一款app，这款app可以明确告诉我我今天吃（这款app主要是针对什么呢，主要针对我们在校生的）什么比较好，我应该从哪些方面做出这款app，才能得到解决这一个问题。美团这是告诉我们我们有很多选择，正是因为选择太多，反而增加我们的负担，没有明确告诉我们应该选什么。
​ 那么我们是想创作这么一个新的项目了，那么我们该怎样做才能实现这个功能呢，我们为了实现这些功能，该做哪些东西呢？

开始逐步写项目，项目完全是原创，所有的东西都是自己写的，涉及的点比较多，需要渐渐自己完善。技术栈： vue2.0 + Element Ui + vueX+ …，选择vue2.0的原因是因为vue2.0的稳定性比较好，不会出现莫名其妙的bug，先做一个网页版本，后期再做小程序版本或者是app版本

2021/10/27
为了巩固基础，从基础开始，一点一点进行记录，开始写项目（本网站不定性，想到什么东西，添加什么东西进入，这个网站可以是非常复杂的，也可能很简单，主要是如果后面会用到一些高深算法，可能无法实现，还有就是如何当前项目是一个app，请求打开摄像头，当用户选定某菜使，根据用户的的瞳孔，分析该用户对这个菜品的喜欢程度，以及做出之后的相关处理，主要是需要一些实用，创新新颖的模块）
查看nodejs版本和npm版本，在命令行中输入：

查看node, npm版本号
node -v
npm -v
　
npm更新到最新的版本
npm install -g npm

淘宝 NPM 镜像，大家都知道国内直接使用npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org

vue-cli安装
npm install vue-cli -g //全局安装 vue-cli

vue-cli的版本查看
vue -V

vue-cli的3.0+以后使用的不是vue-cli了，如果用以上的安装命令安装的并不是最新版的3.0+的，而如果安装3.0的话就需要使用新的
npm install @vue/cli -g

如果原来已经安装了vue-cli的话需要先卸载原来的安装
npm uninstall vue-cli -g

创建项目：
vue init webpack projectName （vue2.x创建项目）
vue create projectName (vue 3.0x)
再vue-cli 3下可以使用vue create 创建项目，也可使用vue init webpack创建项目,不过要桥接工具，在全局安装 @vue/cli-init

进入项目，下载依赖：（进入项目一定要切换到项目路径， 直接在项目的处，右键打开终端，不然可能进入的不是要运行项目的终端）

npm install 或者 cnpm install

运行项目：
npm run dev

在项目开发之中使用到element-ui， 引入步骤如下：
1.下载 npm install element-ui
2.mian.js之中引入包： import ElementUI from ‘element-ui’
3.main.js之中引入css样式，详细路径
4.全局使用Vue.use(ElementUI)

在项目之中还会用到vuex项目管理工具，vueX是一个状态管理工具，主要是多组件之间数据实现共享，可以很方便地解决，兄弟组件之间数据共享或者是多嵌套组件数据共享，当然，也可以使用全局事件总线，或者是pubsub-js订阅者-发布者模式实现，不过上面这些一般比props, $on好用一些。安装vueX如下:
1.在项目src下创建一个stroe文件夹，写一个index.js文件, 安装 :
npm install vuex --save

在index.js之中写入如下代码，主要涉及到vueX之中三个对象:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

//响应组件中用户的动作
const actions = {}
//修改state中的数据
const mutations = {}
//保存具体的数据
const state = {}
export default new Vuex.Store({
//简写方式actions: actions
	actions,
	mutations,
	state
})

2.在mian.js之中引入

import store from './store/index.js'
export defauult({
	store, 
	//这里使用render的主要原因是引入的runtime.js包没有模板解析器，需要render函数帮助编译
	render: h => h(App)
})

3.在各个组件之间使用vueX