node.js环境安装

1、node.js环境的安装

• 打开node.js 中文网：https://nodejs.org/zh-cn/
• 找到下载： https://nodejs.org/zh-cn/download/
• 选择windows安装包 下载
• 下载完成之后，打开装个windows安装包，一路next 下去， 最后等安装完成！
• 检测安装是否成功： 打开电脑的cmd命令行窗口： 输入node -v 如果显示版本号说明安装node环境成功！

2、vue-cli脚手架安装

• 安装淘宝镜像

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

• 检测淘宝镜像是否安装成功

  cnpm -v   // 显示版本号说明安装成功
  
  // 显示如下：
  cnpm@6.1.1 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
  npm@6.14.4 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
  node@12.12.0 (/usr/local/bin/node)
  npminstall@3.27.0 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
  prefix=/usr/local 
  darwin x64 19.4.0 
  registry=https://r.npm.taobao.org
  

  ====================================================

• 什么是脚手架： 我们在程序开发的时候，预先准备好的一个项目的基本目录结构。

• 如何安装

  打开命令行窗口，输入以下命令

  npm i vue-cli -g					// windows
  sudo  npm i vue-cli -g    // mac  
  ==============安装了淘宝镜像就可以用下面的安装==================
  cnpm i vue-cli -g							// windows
  sudo cnpm i vue-cli -g        // mac  
  

• 检测安装是否成功

  vue -V      // 显示版本号说明安装成功
  

  =只需要在电脑里配置一次，之后都不需要了！

3、初始Vue项目

• 找到一个存放项目的目录

• 进入该目录的cmd窗口 ( 检测一下 vue -V 是否可以用！)

• 执行初始化项目的命令

  vue init webpack 项目名(英文的)     // 如：  vue init webpack vuedemo
  
  ⠹ downloading template     // 下载模板
  ? Project name (vuedemo)   // 项目名称     回车
  ? 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 - r
  ender functions are required elsewhere 
  ? Install vue-router? (Y/n)    // 是否安装路由    输入  N 回车
  ? Use ESLint to lint your code? //  输入  N 回车
  ? Set up unit tests (Y/n) // 输入  N 回车
  ? Setup e2e tests with Nightwatch? No    // 输入  N 回车
  
  // 我们要安装项目依赖的模块包使用哪种方式，
  ? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
   Yes, use NPM    // 使用npm       【没有安装cnpm, 就使用这个】  回车
    Yes, use Yarn   // 使用yarn
  ❯  No, I will handle that myself   // 不选择，自己后面操作！  【 如果安装了cnpm 推荐 选择这个】  回车
    
  # Project initialization finished!   // 项目初始化结束
  # ========================
  
  To get started:  // 【输入以下命令】
  	
    cd vuedemo   // 进入项目目录
    npm install (or if using yarn: yarn) 
  	// 安装项目依赖的包！  如果安装了cnpm, 推荐这一步执行 cnpm i   【等待...】
    npm run dev     //启动项目   包安装好了之后  
    
    
    // 执行上述命令之后回显示如下内容
     DONE  Compiled successfully in 6398ms                                                                         10:59:32
  
   I  Your application is running here: http://localhost:8080
   // 项目运行在本地的   http://localhost:8080
  
    
  
  
  =======================
    第1步： 进入项目存放目录的cmd窗口
  	第2步： vue init webpack 项目名      // 项目名是英文
    第3步： 按照上面的选择去操作
    第4步： 执行   cd 项目目录
    第5步： 执行   cnpm  i
    第6步： 执行   npm run dev   
  

4、目录介绍

• build 打包目录 【了解即可】
• config 配置目录 【了解即可】
• node_modules 项目依赖包 非常重要，如果没有这个文件夹 就去指向cnpm i 下载。 只有有这个文件夹才可以去运行项目(npm run dev) 【知道即可】
• src 开发目录 【非常重要，开发都在这里做】
  • assets 目录 静态文件目录 【这里存放css、img 这些资源，但是会被编译】 【可以删除的重构的】
  • components 目录 【组件存放目录】 【可以删除的重构的】
  • App.vue 项目的根组件 【重要！！！】
  • main.js 项目的入口文件 【重要！！！】
• static 静态目录 【存在静态文件，如图片、css、js 这里存的东西不会被编译】 【知道即可】
• .babelrc babel配置文件 【无需知道】
• .editorconfig 编译器语法配置 【无需知道】
• .gitignore git版本提交的时候忽略的文件 【无需知道】
• .postcssrc.js css转义的配置文件 【无需知道】
• index.html 【单文件的 页面文件 重要】【知道就好了】
• package.json 【重要， npm i执行的时候就会去读取这个文件下载依赖的包】. 【知道就好了】
• README.md 【说明文件】 【无需知道】

5、文件介绍

• main.js介绍

  import Vue from 'vue'    // 引入Vue    相当于  script src 引入文件
  import App from './App'
  
  Vue.config.productionTip = false
  
  // 实例化一个Vue对象
  new Vue({  
    el: '#app',    //  找根目录下面的index.html里面的app节点
    components: { App },   // 引入根组件 App 作为 页面的模板！
    template: '<App/>'
  })
  
  

• App.vue 【组件】

  • 三个部分组成 文件后缀是vue
  • tempate 是模板
  • script 是js
  • style 是样式

  <template>
    <div>你好</div>
  </template>
  <script>
  // 组件的JS
  export default {
      data(){
        return{}
      },
      methods:{
  
      },
      watch:{},
      computed:{}
  }
  </script>
  <style scoped>
  
  </style>