Vue project environment construction

node and npm installation: https://blog.csdn.net/u010255310/article/details/52205132

The startup of vue: reprint: original address: https://juejin.im/post/5acf26cd6fb9a028cc619d17

VUE series from scratch (installation of scaffolding), cute little white to get started with VUE

Chapter 1 Installing the Scaffolding

foreword

The front-end is a hodgepodge, with various technologies and frameworks emerging one after another, from pc to mobile, from front to back, from web to desktop applications, and even native Android and ios. It can be said that js is in hand, and I have it in the world (hands are funny).

background

To be honest, I have been working on the front-end for a few years. I still felt that, no matter what framework or modularity you have, I will use jquery. What is the use of all those bells and whistles, if I can meet the requirements, it is ok! Humph, but when I actually got into VUE, WTF? Can you write like that? It's not too smooth to develop! You don't need to operate the DOM, just care about the data layer, get the data from the interface, update the data, and you don't have to worry about the rest.

introduce

Next, I will share my transition from jquery to VUE, hoping to help you who are just getting into the pit. I believe you should have read a lot of information about VUE before reading this article, but most of them It's just a concept + a simple clip. I guess you, like me, are still confused after you follow along. So I decided to write a document that I can understand and most people can understand. .

(1) Install nodejs

The version of nodejs needs to be at least 8.9.4 and above (very important). I won't talk about how to install it. There are a lot of tutorials online, don't forget the Taobao mirror source of npm. If you want to see what your node version is, open the command line and enternode -v

(2) Install webpack

Or open the command line and enter npm install webpack -g, which means to install webpack globally, so that you don't have to reinstall webpack every time you create a new project. After completion, enter it webpack -vand see, if the version number appears, it means the installation is successful

(3) Install VUE scaffolding

因为是从0开始的,建议大家还是直接从脚手架开始吧,如果自己搭建的话,光是新建各种文件夹就已经头大了,何况还得自己配置webpack。继续在命令行输入npm install vue-cli -g,完成之后老规矩,输入vue -V查看是否安装成功,注意-V是大写。

以上几步,已经准备好了我们需要的环境,接下来开始进入开发阶段

  1. 随便新建一个文件夹,打开后在文件夹空白处按住shift+鼠标右键,点击在此处打开命令窗口,输入vue init webpack test,这里的test是指项目名称,你可以自己起名字,但是别用中文。之后一直回车,注意:? Use ESLint to lint your code? (Y/n)看到这一行的时候建议输入n,这是一个es6语法检测器,如果开启的话你得严格按照es6规则写代码,稍有不注意就会报错。到这里就基本建好了。 此时你会发现刚才新建的文件夹里多出了好多东西:
  2. 在刚才打开的命令行中,输入cd test,就是进入你刚才新建的目录里,你的文件夹叫啥,你就cd啥
  3. 继续输入npm install,会自动安装你需要的各种依赖
  4. 完成之后开始让项目跑起来,输入npm run dev,运行成功在浏览器里打开http://localhost:8080,看到这个画面,就代表你已经成功了

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324440599&siteId=291194637