前端项目创建流程

  1.安装node.js   
     node -v  查看是否安装成功;
  2.安装node.js镜像加速器 (npm/cnpm)  一般安装node.js会自动安装镜像加速器;

         由于npm下载的比较慢,所以可以安装cnpm和yarn

         1->安装cnpm:  官网:npmmirror 中国镜像站

              安装命令:npm install -g cnpm --registry=https://registry.npm.taobao.org

             将cnpm设置为global packageManager命令:set --global packageManager=cnpm

         2->安装yarn     :npm install -g yarn

         查看是否安装成功命令:  yarn    

          删除yarn(不是很好用):如果不想使用yarn  , 可通过 命令:  $ yarn global bin      

                         查询到存放地址之后 到对应目录删除掉yarn就可以了

         3.如何切换包管理器呢?

                 包管理器和淘宝npm镜像源会存入  ~/.vuerc,此文件如果是windows环境，则存在                        了 C:/user/administrator/ 下： 

                            

                 打开此文件：

                              

                只需手动更改配置内容npm为yarn，即可更改创建项目时的包管理器了（亦可删                       除 .vuerc 文件重新运行 vue create xx 选择配置）
  3.安装vue/cli脚手架----- (项目的搭建)
    安装命令:npm install -g @vue/cli
    查看是否安装成功命令:  vue --version
 4.启动项目  (可以在cmd中启动,也可以在windows powerShell中启动)
         1.进入项目存放的目录;   cd   路径
         2.vue create 项目名;
         3.按空格选中
         4.按提示进行选择
         5.进入项目   cd  项目名;       
         6.npm run serve   启动项目;
         7.通过页面访问;
         8.通过编辑器打开项目;
 5.安装element-ui(在项目路径里安装)   官网地址:https://element.eleme.cn/#/zh-CN
         1.安装命令:npm i element-ui -s
         2.引入element
                   1> 完整引入
                        在 main.js 中写入以下内容：

                           import Vue from 'vue';
                           import ElementUI from 'element-ui';
                           import 'element-ui/lib/theme-chalk/index.css';
                           import App from './App.vue';

                           Vue.use(ElementUI);

                          new Vue({
                          el: '#app',
                          render: h => h(App)
                          });
       其他可以资料可以看官网

6.引入vue-router   指令:npm i vue-router

7.在项目中引入router 

             1-> 在main.js中引入router

                 

             2->在项目中创建router目录,并创建index.js文件,编写路由逻辑.

                

            3.编辑router下的index.js文件

              

8.在项目中创建views目录,并创建Home.vue文件,并编写

        

9.在router页面对Home页面进行引入.

       

 

               

项目打包指令:npm run bulid

6.创建登录页面
           1. 将app.vue页面处理一下:   将div中nav标签及style中的内容如果没有用的话可以删掉
               view中的组件及compoents中的组件可以删掉
           2.在views中创建新的页面:login.vue

                
             

        3.更改路由页面 

              

      4.登录页面的渲染:从element-ui中查找需要的组件

           5.连接后端

             安装axios   命令:npm install axios