Vue（一）—— 创建一个Vue项目

呼叫冰河谷

已于 2022-11-01 15:15:30 修改

阅读量958

点赞数 1

分类专栏： Vue 文章标签： Vue

于 2021-01-14 10:23:22 首次发布

本文链接：https://blog.csdn.net/hzkcsdnmm/article/details/107221256

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、NodeJS基础知识

1.下载node.js

下载地址：Download | Node.js

安装程序不会询问你安装路径，Node.js 会被自动安装到 C:\Program Files\nodejs 或C:\Program Files (x86)\nodejs（64位系统）目录下，并且会在系统的 PATH 环境变量中增加该
目录，因此我们可以在 Windows 的cmd命令串口中查看其版本：node -v

或者可以输入node，进入 Node.js 的交互模式

2.配置全局安装路径和缓存

在nodejs安装目录下新建目录：node_cache和node_global，并在cmd中执行以下命令

npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"

查看npm配置：npm config list 确认修改成功

3.配置node环境变量

编辑系统变量Path，新增如图

安装淘宝npm

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

如果报这样的错时，请使用管理员身份运行cmd或webstrom编译器即可

4.Node.js的使用

使用Node.js搭建服务器——实现的最简单的 HTTP 服务器

创建一个app.js文件，内容如下

var http=require('http');//这个程序调用了Node.js提供的http模块，require函数来调用模块
http.createServer(function(req,res){
	res.writeHead(200,{'Content-Type':'text/html'});
	res.write('<h1>Node.js</h1>');
	res.end('<p>Hello</p>');
}).listen(3000);
console.log("port 3000");

然后我们使用如下命令启动服务即可

node app.js

访问服务

5.NodeJs中的模块

模块：模块是 Node.js 应用程序的基本组成部分，一个Node.js 文件就是一个模块，这个文件可能是 JavaScript 代码、JSON 或者编译过的 C/C++ 扩展

如 var http = require('http')，其中 http是 Node.js的一个核心模块，我们通过require 函数获取了这个模块，然后才能使用其中的对象

创建模块：

在 Node.js 中，创建一个模块非常简单，因为一个文件就是一个模块，我们要关注的问题仅仅在于如何在其他文件中获取这个模块，Node.js 提供了 exports 和 require 两个对
象，其中 exports 是模块公开的接口， require 用于从外部获取一个模块的接口，即所获取模块的 exports 对象，下面我们来写一个例子

创建module.js

var name;
exports.setName=function(thyName){
	name=thyName;
}

exports.sayHello=function(){
	console.log('Hello '+name);
}

创建getmodule.js

var myModule=require('./module');//require 不会重复加载模块，也就是说无论调用多少次require获得的模块都是同一个
myModule.setName('test');
myModule.sayHello();

然后运行getmodule.js

或者用如下方式把一个对象封装到模块中

function Hello(){
	var name;
	this.setName=function(thyName){
		name=thyName;
	}

	this.sayHello=function(){
		console.log('Hello '+name);
	}
}

module.exports=Hello;//把一个对象封装到模块中

var Hello=require('./singleobject');
hello=new Hello();
hello.setName('test');
hello.sayHello();

6.NodeJs中的包

Node.js 的包类似于 C/C++ 的函数库或者 Java/.Net的类库。它将某个独立的功能封装起来，用于发布、更新、依赖管理和版本控制，Node.js 根据 CommonJS 规范实现了包机制，开发了 npm来解决包的发布和获取需求

Node.js 的包是一个目录，其中包含一个 JSON 格式的包说明文件 package.json。严格符
合 CommonJS 规范的包应该具备以下特征：

package.json 必须在包的顶层目录下；
二进制文件应该在 bin 目录下；
JavaScript 代码应该在 lib 目录下；
文档应该在 doc 目录下；
单元测试应该在 test 目录下。

如renderkid这个包

使用包

创建一个somepackage文件夹，然后在其内部创建一个index.js文件，内容如下

exports.hello=function(){
	console.log('hello');
};

然后再sompackage文件夹外部创建一个getpackage.js文件，内容如下

var somepackage=require('./somepackage');
somepackage.hello();

调用getpackage.js

包通常是一些模块的集合,也就是说我们只有引入了somepackage文件夹就可以访问到所有在这个文件夹中的模块了

使用package.json，我们在sompackage文件夹下创建package.json文件，内容如下

{
	"main":"./lib/interface.js"
}

然后我们在sompackage文件夹下创建lib文件夹，并在其下创建interface.js，内容如下

exports.hello=function(){
	console.log('hello2');
};

然后再次调用getpackage.js

Node.js 在调用某个包时，会首先检查包中 package.json 文件的 main 字段，将其作为包的接口模块，如果 package.json 或 main 字段不存在，会尝试寻找 index.js 或 index.node 作
为包的接口

完全符合规范的 package.json 文件应该含有以下字段。

name ：包的名称，必须是唯一的，由小写英文字母、数字和下划线组成，不能包含空格。
description ：包的简要说明。
version ：符合语义化版本识别规范的版本字符串。
keywords ：关键字数组，通常用于搜索。
maintainers ：维护者数组，每个元素要包含 name 、 email （可选）、 web （可选）字段。
contributors ：贡献者数组，格式与 maintainers 相同。包的作者应该是贡献者数组的第一个元素。
bugs ：提交bug的地址，可以是网址或者电子邮件地址。
licenses ：许可证数组，每个元素要包含 type （许可证的名称）和 url （链接到许可证文本的地址）字段。
repositories ：仓库托管地址数组，每个元素要包含 type （仓库的类型，如 git ）、
url （仓库的地址）和 path （相对于仓库的路径，可选）字段。
dependencies ：包的依赖，一个关联数组，由包名称和版本号组成

7.Node.js包管理器

即npm是 Node.js 官方提供的包管理工具，用于 Node.js 包的发布、传播、依赖控制，npm 提供了命令行工具，使你可以方便地下载、安装、升级、删除包，也可以让你作为开发者发布并维护包

查看npm配置：npm config list

代开npm配置文件：npm config edit

安装npm相关的包：npm install （进入到项目目录下执行，即存在package.json文件的目录下）

安装指定版本的包：npm install express@3.21.2（以express举例）

安装某包：

npm install moduleName #安装模块到到当前目录的node_modules子目录下,Node.js的require 在加载模块时会尝试搜寻 node_modules 子目录，因此使用 npm 本地模式安装的包可以直接被引用
npm install -g moduleName #安装模块到全局，即npm config prefix指定的位置
npm install --save moduleName # --save的意思是将模块安装到项目目录下并在package文件的dependences节点写入依赖
npm install --save-dev moduleName # --save-dev 的意思是将模块安装到项目目录下并在package文件的devDependencies节点写入依赖
#npm i xxx -S，也就是 npm install module_name --save 写入dependencies
#npm i xxx -D，也就是 npm install module_name --save-dev 写入devDependencies

本地模式和全局模式

在使用 npm 安装包的时候，有两种模式：本地模式和全局模式。

默认情况下我们使用npm install 命令就是采用本地模式，即把包安装到当前目录的 node_modules 子目录下。Node.js
的 require 在加载模块时会尝试搜寻 node_modules 子目录，因此使用 npm 本地模式安装的包可以直接被引用。

npm 还有另一种不同的安装模式被成为全局模式。为什么要使用全局模式呢？并不是因为许多程序都有可能用到它，为了减少多重副本而使用全局模式，而是因为本地模式不会注册  PATH 环境变量，可以直接在命令行中运行。npm 本地模式不能直接在命令行中调用。

但使用全局模式安装的包不能直接在 JavaScript 文件中用  require 获得，但通过  npm link 命令可以打破这一限制

我们已经通过  npm install -g express 安装了  express ，
这时在工程的目录下运行命令：
$ npm link express
./node_modules/express -> C:\Program Files\nodejs\node_modules/express  #C:\Program Files\nodejs\node_modules 这个目录是Path中配置的全局路径
我们可以在 node_modules 子目录中发现一个指向安装到全局的包的符号链接。通过这种方法，我们就可以把全局包当本地包来使用了

总结：当我们要把某个包作为工程运行时的一部分时，通过本地模式获取，如果要在命令行下使用，则使用全局模式安装

清楚缓存：npm cache clean --force（同时要把项目下node_modules删掉次才能重新npm install）

安装nrm工具(nrm是一个切换源的工具 )：npm install -g nrm

查看可用的源：nrm ls

添加新的源：nrm add 源的名称 https:// 地址

删除源：nrm del 源的名称

切换源：nrm use 源的名称

卸载：npm uninstall vue-cli -g

二.Node.js语法

1.全局对象（global，类似Js中window是全局变量）

global 最根本的作用是作为全局变量的宿主，全局变量有：

process 是一个全局变量，即 global 对象的属性，它用于描述当前 Node.js 进程状态的对象，提供了一个与操作系统的简单接口

console 用于提供控制台标准输出

2.常用工具util

util 是一个 Node.js 核心模块，提供常用函数的集合，用于弥补核心 JavaScript 的功能过于精简的不足（这里不详细讲）

3.事件驱动events

events 是 Node.js 最重要的模块，没有“之一”，原因是 Node.js 本身架构就是事件式的，而它提供了唯一的接口，所以堪称 Node.js 事件编程的基石。 events 模块不仅用于用
户代码与 Node.js 下层事件循环的交互，还几乎被所有的模块依赖

事件发射器：events 模块只提供了一个对象： events.EventEmitter 。 EventEmitter 的核心就是事件发射与事件监听器功能的封装

error事件：EventEmitter 定义了一个特殊的事件 error ，它包含了“错误”的语义，我们在遇到异常的时候通常会发射 error 事件。当 error 被发射时， EventEmitter 规定如果没有响
应的监听器，Node.js 会把它当作异常，退出程序并打印调用栈。我们一般要为会发射 error事件的对象设置监听器，避免遇到错误后整个程序崩溃。

继承 EventEmitter：大多数时候我们不会直接使用 EventEmitter ，而是在对象中继承它。包括 fs 、 net 、http 在内的，只要是支持事件响应的核心模块都是 EventEmitter 的子类

4.文件系统fs

5.HTTP服务器和客户端（如我们上面提到的使用NodeJS创建服务器）

三、创建Vue项目

在cmd中进入到项目想要保存的目录下执行 vue init webpack 项目名称，然后一直下一步就可以啦

（用webstrom创建不知道时哪里有问题一直报错）

确保执行过npm install vue-cli -g

完成创建

然后用webstrom打开项目，在终端执行npm install添加依赖

添加成功

然后点击如图所示，添加一个启动命令，我这里命名为dev，然后点击Apply，点击OK

然后我们运行项目，点击如图按钮

然后控制台显示如图代表项目启动成功

我们按控制台提示去访问项目 ,页面成功显示

使用vue ui创建项目

查看是否可以使用vue ui

vue -V //查看版本，版本低于3时没有ui功能
vue -h //查看功能项目

npm install @vue/cli -g  //安装新版本


npm uninstall vue-cli -g  //卸载老版本

启动vue ui

然后找到创建，然后我们新建一个文件夹用来保存新建项目

选择再次新建项目

输入项目名称和相关选项

选择手动

按如图所示进行选择

选择如图所示

然后慢慢等项目创建，之后就会显示如图页面，可以查看下载了哪些组件，我觉得还是很方便开发的

在vue ui中导入已有项目

对初始项目结构的理解

初始项目界面展示

APP.vue：主页面

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App' //这里的name如果没有用到组件递归调用自己可以不写，对程序没有影响
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.js：全局js，把所有组件中用到的公共JS对象放在这里

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false //是否显示生产模式提示语句

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router, //把router注册到Vue，以便在APP组件中使用router标签或者this.$router.push等命令
  components: { App },
  template: '<App/>'
})

如果把 Vue.config.productionTip设置成true则在浏览器的控制台会显示如下提示

components/ HelloWorld.vue：子组件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () { //data即数据项，页面中的数据展示内容都和它有关
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

router/index.js：路由跳转JS

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

安装ElementUI（官网）

安装

cnpm install element-ui --save

引入：在src下的main.js中添加

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Element)

安装axios /ekʃəs/（官网）—— 一个基于 promise 的 HTTP 库

cnpm install axios --save

引入：在src下的main.js中添加

import axios from 'axios'
Vue.prototype.$axios = axios

安装vue-router

cnpm install vue-router --save

安装MarkDown编辑器组件——mavon-editor

cnpm install mavon-editor --save

vue的部署：

将vue项目打包：在项目目录下执行 npm run dev，然后就会生成一个dist文件夹

然后将dist文件夹复制到nginx的html目录下

然后我们修改nginx的配置文件

然年我们启动nginx，测试访问：http://localhost:8011即可，然后会跳转到首页

呼叫冰河谷

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue（一）—— 创建一个Vue项目

1.npm命令总结查看npm配置：npm config list修改npm配置：npm config edit安装npm相关的包：进入到项目目录下执行npm install （即存在package.json文件的目录下）
复制链接

扫一扫