1.1 The basic concept (basic concepts from the e-learning)
1.1.1 node.js
Node.js is a Javascript runtime environment (runtime), released in May 2009, developed by Ryan Dahl, in essence, Chrome V8 engine package. Node.js use some special cases is optimized, the API provides an alternative, such V8 run better in a non-browser environment. Javascript execution speed of the V8 engine is very fast, very good performance. Node.js is a platform built on Chrome JavaScript runtime for easily building fast response, easy to expand network applications. Node.js event-driven, non-blocking I / O model and to be lightweight and efficient, ideal for data-intensive real-time applications running on distributed devices. To summarize, node, js execution environment provides a javascript outside the browser, to meet the specific needs of the scene.
1.1.2 above sea level
npm is nodejs package management and distribution tools. It allows javascript developers to more easily share code snippets and share, and manage your shared by npm code is also very convenient and simple. Easier reference and analysis libraries and plug-ins based on nodejs developed by npm.
1.1.3 Webpack
WebPack packer module can be seen: it to do is analyze your project structure, expand find language (Scss, TypeScript, etc.) JavaScript modules as well as some other browsers can not run directly, and package it as appropriate format for browsers. The module can be developed based on the front end engineering codes packaged into formats that can be used by the browser webpack.
1.1.4 Overview
Vue.js is a front-end framework for the most fire, and it Angular.js, React.js together, and become the mainstream of the three front-end framework. Vue.js is a framework for building user interfaces, only concerned with the view layer, it is not only easy to use but also easy to integrate with existing third-party libraries or projects. (Vue is supported by third-party libraries, developers can integrate up to do large-scale projects), the main work of the front of the V in MVC is responsible for this layer, the main job is to deal with and interface to make the front page of results. Vue core library focus only on the view layer, it is not only easy to use but also easy to integrate third-party libraries or existing project
1.1.5 Description Relations
npm install to help install vue, or React to local, npm install can also install vue, React development tools. Of course, you can find your site as like jQuery downloaded, introduced in the page.
npm is like a front-end add-ons store, there are a variety of package developers to write, when you need to install it from the command line, the concept is similar to the linux apt.
node.js is the server, the browser js has many defects, such as local files can not be operated na. The js server on it, so we can help with node management, dealing with I / O, and then through the fast hardware developers a package, a transformation, a grunt came out.
vue development itself is not dependent node, but vue vue-cli scaffolding tool which is based on the integration of webpack node developed.
I can only say webpack is dependent on the node.
1.2 Software Installation
Software Version 1.2.1
operating system:
Windows 10 Home Edition
application:
IntelliJ IDEA 2018.3.5 x64
jdk1.8.0_171
Node.js v8.11.3
1.2.2 JDK installation
Readers can obtain the latest version of the Java version of Oracle's official website. After the installation is complete configuration after installation, configuration and JRE_HOME JAVA_HOME environment variable. Run the following command indicates JDK installed successfully:
C:\Users\45014>java -version
java version "1.8.0_171"
Java(TM) SE Runtime Environment (build 1.8.0_171-b11)
Java HotSpot(TM) 64-Bit Server VM (build 25.171-b11, mixed mode)
1.2.3 install node.js
Download: https://nodejs.org/en/download/ . After the download is complete the default installation, the installation is complete, open cmd enter the following command to see if the successful installation of
C: \ the Users \ 45014> the Node -v
v8.11.3
C:\Users\45014>npm -v
5.6.0
1.2.4 scaffolding installation project
D: \ code \ Ideaproject \ vue_test> for init webpack vue_test
Create the following files and directories after the execution is complete.
Since my 8080 port is already in use, I changed to 8090. Modify /config/index.js file, find the port: 8080, amended as: port: 8090
Then execute
D: \ code \ Ideaproject \ vue_test \ vue_test> npm install
D: \ code \ Ideaproject \ vue_test \ vue_test> nper run dev
> Dev [email protected] D: \ code \ Ideaproject \ vue_test \ vue_test
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
10% building modules 3/7 modules 4 active ...t\node_modules\webpack\hot\emitter.js
DONE Compiled successfully in 5752ms 21:21:11
I Your application is running here: http://localhost:8090
Open your browser and enter: HTTP: // localhost: 8090
1.2.5 Installation Idea
Reference Download (network sources, very good): https://www.0daydown.com/02/867195.html
Note that only install the commercial version of the idea, or can not install the plug
This plugin provides support for Vue.js in IntelliJ IDEA Ultimate, WebStorm, PhpStorm, PyCharm Professional and RubyMine.
Business Edition only supports the idea
It provides intelligent Vue-specific code completion, navigation, and refactoring.
The plugin bundles a collection of Vue.js code templates by Sarah Drasner.
1.2.6 Idea of Vue.js plug-in installation
Idea Found menu:
- 选择File -》 Settings -》 Plugins：搜索vue.js，安装Vue.js，注意安装完成后会提示重新IDE
- 设置JavaScript为ECMAScript 6
File -》 Settings -》 Languages&Frameworks -》 JavaScript：修改JavaScript language version为ECMAScript 6
1.2.7 vueAdmin-template导入
新建空的工程：vueAdmin-template，
vueAdmin-template是基于vue的一套后台管理系统基础模板。
GitHub地址：https://github.com/PanJiaChen/vueAdmin-template#vueadmin-template，
- 下载后解压到D:\code\vueAdmin-template，导入工程如下：
- 点击Terminal，并执行npm install
1.2.8 配置run启动命令
选择Run菜单下的Edit Configuration，点击加号，选择npm，Name为Dev，package.json选择D:\code\vueAdmin-template目录下的package.json，Command为run，Scripts为dev,然后就可以直接在idea中运行了。
1.2.9 启动vueAdmin-template工程
选择Run下run命令进行执行，显示如下结果：
注意点：如果提示如下错误：
vue中"‘webpack-dev-server’不是内部或外部命令，也不是可运行的程序"的报错
解决办法将项目里的“node_modules”文件夹删除，然后重新运行cnpm install
执行成功后，自动打开浏览器并显示如下界面：
用户名和密码输入admin/admin，即可进入页面，后续便可自己学习。
-----end--------