How to install vue.js and create your first project vue

The theme is how to install vue.js and create the first project vue

Now the front end of the mainstream has three framework, vue, angular, react, vue is the people Daniel created, locate the beginning of dependent libraries, but the development is now a mature front-end framework, so we need to look at this vue.
First vue is a "MVVM framework (library)", MVVM is the Model-View-ViewModel shorthand, and react similar vue and angular than angular compact, easier to use
vue core library "only concerned with the view layer", and " very easy to learn, "is very easy to integrate with other libraries or existing project, on the other hand, vue fully capable of driving the development of a single file using the library components and vue ecosystems support complex single-page application

How to create a project that vue, let's start from the download node.js
node.js official website Download: https: //nodejs.org/en/
select the recommended version or download what you want, after downloading, installation path from defined, shall be installed.
We want to be installed after a series of configuration

First configure npm, two new folders in the installation directory
called node_cache
called node_global
because if you do not build this global folder later when performing the installation, such as: npm install express [-g] (optional parameters back - when g, g representative of the overall global mounting means) mounted statement will be mounted to the mounting module [C: \ users \ username \ AppData \ Roaming \ npm] path. The cache is used to prevent caching.

Note also that we want to build a node_modules node_global in the folder to save the future of our stuff installed, such as express and vue.cli.

 

Then there is the ring configuration environment variable is
commonplace. My Computer -> Properties -> Advanced Properties Settings -> set the environment variable
to create a new system variable NODE_PATH, the
C: \ Program Files \ nodejs \ node_global \ node_modules write into

Is the path followed by a user variable
was added at the end C: \ Program Files \ nodejs \ node_global

Also note that modifying a thing, this thing in C: \ Program Files \ under nodejs \ node_modules \ npm file called npmrc. FIG open notepad with modifications

Configure these, we open the cmd
input note -v
If you have version information output specification node installation was successful.
Then we look at two input configured npm
npm the SET config prefix "D: \ Program Files \ nodejs \ node_global"
npm config the SET Cache "D: \ Program Files \ nodejs \ node_cache"

Then we start the installation vue.cli we need.
This is vue.js scaffolding, to help us build the template.
Command: npm install -g vue-cli
remember we have to use administrator mode open cmd, otherwise there will be some permission issues an error.

After installation is complete, we enter vue, there will be some help command output explained.

Enter vue list
there will be some shows available templates, we choose to install webpack
command: vue init webpack demo (demo play their own name)

然后按照指示输入name 和 description,按回车
下面的都可以直接输入y,也就是yes来确定使用。

cmd中可以输入dir来查看项目中生成了哪些文件目录结构。
回到demo下
输入:npm install
过程会有些慢,加载依赖。
安装成功后,会发现多一个node_modules文件夹。
node_modules里面放了我们依赖的代码裤。
最后我们输入:npm run dev
我们会看到

8080端口打开了
我们去浏览器中打开localhost:8080去看一下
创建成功。

Guess you like

Origin www.cnblogs.com/funtake/p/11962165.html