ElementUI Profile
We learn VUE, know that it's the core idea of style components and data driven, but every component you need to write your own templates, styles, add events, and other data are very troublesome,
so hungry yet introduced based on the component library VUE2.0 its name is called element-ui, provides a rich PC-side components
Element官网: http://element-cn.eleme.io/#/zh-CN
Vue + ElementUI installation
CDN way:
<! - 1. Import CSS ->
<Link the href = "https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" the rel = "this stylesheet"> <! - introducing vue and 2. Router-vue -> <Script the src = "https://cdn.bootcss.com/vue/2.6.10/vue.js"> </ Script> <-! unused vue routing function may import -> <Script the src = "https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"> </ Script> <-! 3. introduced ElementUI assembly -> <Script the src = "https://cdn.bootcss.com/element-ui/2.8.2/index.js"> </ Script>
NodeJS environment to build
Node.js what is
Node.js is based Chrome V8 engine [ JavaScript runtime environment]. Node.js uses an event-driven, non-blocking I / O model.
Node.js is a make JavaScript running in the development server platform, which allows JavaScript to be with PHP, Python, Perl, Ruby and other server-side scripting language on an equal footing
npm What is
npm fact, Node.js package management tools ( Package Penalty for Manager ).
Why we need a package management tool?
Because we Node.js development time on, many others will be used to write JavaScript code.
If we want to use a package written by someone else, always searching by name at the official website, download the code, extract, re-use, very cumbersome.
So a centralized management tool emerged: after everyone had put into the development of its own module package npm official website, if you want to use,
directly through npm installation can be directly used, there is no managed code which should be where to download.
More importantly, if we want to use modules A, and module A turn depends on module B, module B in turn depends on module X and module the Y-,
npm according dependencies, all dependent packages are downloaded and manage. Otherwise, manually manage on our own, certainly cumbersome and error-prone.
Note 1: npm == Maven is somewhat similar
Environment to build
Because Node.js platform is running in the back-end JavaScript code, you must first install the machine in the Node environment
Download: https://nodejs.org/zh-cn/download/
select the appropriate version to download, using: node-v10.15.3-win-x64.zip
Node There are two versions of the line: LTS is a stable version of the long-term maintenance of Current is a new feature version
Unzip
to extract the files to a specified location (for example: D: \ initPath), and the establishment of node_global and node_cache these two directories in the unpacked directory
New catalog description
node_global: npm global installation location
node_cache: npm cache path
Configuration environment variable
Add NODE_HOME , is: E: \ tools \ node- v10.16.3-win-x64
modify the PATH and finally adding:;% NODE_HOME%;% NODE_HOME % \ node_global;
Environment Variables View
echo %node_home%
echo %path%
Test whether the installation was successful: open cmd window, the output of the following command output NodeJs and npm version
node -v
asl -v
Npm global module configuration cache default installation location and path
将步骤一创建的node_global(npm全局安装位置)和node_cache(npm缓存路径)与npm联系起来
如果执行命令卡死，可以删除C:\Users\用户名\.npmrc 后重新执行。（用户名：为当前电脑的用户名）
"D:\initPath\node-v10.15.3-win-x64\node_global"，双引号不能少
打开cmd，分开执行如下命令:
npm config set cache "E:\tools\node-v10.16.3-win-x64\node_cache"
npm config set prefix "E:\tools\node-v10.16.3-win-x64\node_global"
修改npm镜像提高下载速度(可以使用 cnpm 或 直接设置 --registry ，推荐设置 --registry)
registry
设置淘宝源
npm config set registry https://registry.npm.taobao.org/
查看源，可以看到设置过的所有的源
npm config get registry
其实此步骤的内容就是将以下代码添加到C:\Users\用户名\.npmrc文件中
registry=https://registry.npm.taobao.org
cnpm安装完成后，以后就可以用cnpm命令代替npm命令, 此时npm还是会用官方镜像，cnpm会用国内镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
如果要恢复成原来的设置，执行如下：
npm config set registry https://registry.npmjs.org/
查看npm全局路径设置情况
此步骤随便全局安装一个模块就可以测评
npm install webpack -g
以上命令执行完毕后，会生成如下文件
%node_home%\node_global\node_modules\webpack
如何运行下载的Node.js项目
将下载的项目解压到指定目录，本例是解压到：E:\Private\vueproject，后面都以此为例
打开命令窗口
cmd
切换到E盘
E
进入指定目录
cd E:\temp\vueproject
下面的才是关键代码
进行依赖安装
命令执行完后，你会发现，项目的根目录下多了一个node_modules文件夹，
那里面就是从npm远程库里下载的模块，然后“安装”到你的项目中，
此步骤，可理解成修改maven的pom文件添加依赖，然后maven再从中央仓库下载依赖
那pom文件在哪里呢？其实就是项目中的package.json
下载项目需要的依赖
npm install
启动项目
npm run dev
