Vue环境搭建

测试基本环境是否存在

node -v # 出现版本号，就行
npm -v
cnpm -v
vue -V

如果没有node， 可以点击 node-v12.14.1-x64.msi 下载，安装即可

设置npm镜像为淘宝镜像

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

安装配置cnpm

npm install cnpm -g --registry=https://registry.npm.taobao.org

安装 vue-cli

cnpm install -g vue-cli

安装完成之后，测试是否安装成功

Vue项目创建

1. 在文件夹的地址栏 ， 输入 cmd， 打开对应的 cmd窗口

2. 在cmd窗口，输入 vue init webpack 项目名， 项目名遵循变量命名规则， 不要太长

3. 需要联网，下载模板， 然后选择配置项

   ? Project name (vue01) # 项目名称, 默认即可
   ? Project description (A Vue.js project)  # 项目描述， 默认即可
   ? Author        # 项目作者
   Vue build (Use arrow keys)  # 项目的打包模板， 默认第一个即可， 回车就行
   
   > Runtime + Compiler: recommended for most users
     Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - re
   nder functions are required elsewhere
   
   ? Install vue-router? (Y/n)   # 是否需要安装 Vue路由，输入 Y， 需要安装
   
   ? Use ESLint to lint your code? (Y/n)   # eslint 代码检测规则， 不需要， 输入 n
   
   ? Set up unit tests (Y/n)  # 是否建立 测试单元， 不需要， 输入n
   
   ? Setup e2e tests with Nightwatch? (Y/n)  #  不需要， 输入n
   
   ? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)  # 询问 使用什么工具安装第三方包， 建议使用方向键，选择第三个选项， 
   > Yes, use NPM
     Yes, use Yarn
     No, I will handle that myself
   

4. 配置选项完毕之后

   # Project initialization finished!
   # ========================
   
   To get started:
   
     cd vue01
     npm install (or if using yarn: yarn)
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack
   

5. 进入项目之中

   cd  vue01
   

6. 使用 cnpm安装第三方包

   cnpm  install
   

   安装完毕之后，会提示

   √ All packages installed (936 packages installed from npm registry, used 2m(network 2m), speed 162.45kB/s, json 785(1.92MB), tarball 18.75MB)
   

7. 使用cnpm安装axios

   cnpm install  axios --save
   

8. 启动项目

   cnpm run dev
   

9. 在浏览器输入网址 http:localhost:8080, 打开Vue项目首页

项目重新运行

1. 先找到自己的vue项目， 显示的有 src文件夹， 以及其他文件才可以
2. 在地址栏输入cmd回车，打开cmd窗口
3. 输入命令 cnpm run dev,启动项目，提示 一个 网址 http://loaclhost:8080
4. 在浏览器输入网址， 就可以正常显示项目

自定义页面

1. 在 src/components目录中，创建一个 后缀名为 .vue的文件， 如 Index.vue

   <template>
     <div>
    			<!--HTML标签-->   
        <h1>首页 </h1>
     </div>
   </template>
   
   <script>
   // JS代码
   export default {
     name: 'Index'
   }
   </script>
   
   <style>
    /* css 样式*/
   
   </style>
   
   

2. 在 src/router/index.js中配置路由信息

   import Vue from 'vue'
   import Router from 'vue-router'
   import HelloWorld from '@/components/HelloWorld'
   
   // 1. 导入自定义组件
   import index from '@/components/Index'  // 名字不要和已有的重名
   //    自己起的新名字              vue文件名
   
   Vue.use(Router)
   
   export default new Router({
     routes: [
       {
         path: '/',
         name: 'HelloWorld',
         component: HelloWorld
       },
       // 2. 在数组中 添加路由对象
       {
         path: '/index', // 后面在哪个网址可以看到自己的页面， 也不能重复
         name: 'Index',  // 当前路由对象的名字
         component: index  // 这个名字必须和上面 起的那个新名字一样
       }
     ]
   })
   

3. 可以在浏览器中输入 http://loaclhost:8080/#/index, 看到自己的页面

项目文件介绍

1. build： 存放的是项目 打包时的配置信息

2. config： 整个项目运行时的配置信息

3. src：非常重要，整个项目的源代码存放在这个目录中

   1. assets： 文件夹中存放的是项目的LOGO

   2. components： 存放的是项目 的 单页面组件， 文件的后缀名是 .vue, 这是Vue独有的一种格式， 后期项目打包时， 会将 vue文件 处理 为 js文件

      任何一个 标准的 .vue文件, 会包含三部分内容：

      • template：模板， 也就是 之前所用的 HTML标签， 负责页面显示的内容
      • script： JS代码， 负责 逻辑处理以及与用户交互
      • style： css样式， 负责页面展示的样式

   3. router： 文件夹存放的是 项目的 路由配置信息

   4. main.js: 项目运行时， 优先启动的 js 配置文件，也就是 入口文件

4. static： 整个项目需要的一些静态资源， 如 图片、音视频等

5. package.json: 项目 的描述信息， 如 项目名称、作者、版本、以及需要依赖的包， 之前使用的 cnpm install就是依赖于这个文件，安装必备的包

6. README.md: 项目的描述文件， 让其他人能更快的入手了解项目