Vue.js "Pre-pass" (with sublime text 3 configuration)

Preface: Pay attention to vue.js a long time, but is not to write a line of code, today ready to start, but found themselves more than the rookie, so the Quartet to find Daniel guidance, finally found the introduction of "Getting Started", even if it is "the guide" of "forward" bar. This article is dedicated to the "idiot level" front-end developers like me, Daniel, please bypass.

1, download and install node. js

Go to the node. JS official website to download a Windows Link installation package Node-v6.2.0-x64.rar file, install it all the way down. Website visit is very slow, you can try Chinese web http://nodejs.cn/

2. Configuring the Vue Environment

First look at the "based on Webpack, Vue, vue-router SPA First Experience" This article, according to try, found not understand webpack, and follow the article all the way to do also useless success, so ask a friend to consult, found the Vue Chinese official website installation article, open the Program Start menu Node.js-->node.js command prompt into node. js,

First set up a directory in the C drive APP2, then CD C:\APP2

Then, follow the prompts to enter the following commands:

# Global Installation Vue-cli
$ NPM install-g vue-cli
# Create a new project based on the "Webpack" template
$ vue init webpack My-project
# Install dependencies, walk you
CD My-project
$ NPM Install
$ npm Run Dev

Windows classmate do not enter the previous #,$ symbol

It is recommended to install the CNPM module before installation, NPM will be very slow to install because of the wall in the country. (Students who do not understand CNPM can see here)

I was FQ installed, but also waited for a long time before installation finished.

During the installation, there will be some warnings and errors, first ignore it.

Finally, there will be a C:\App2\my-project directory, and if it looks like this, it will be successful:

Faced with so many files, do not know how to open, and later through the "Open url" mode of VS, opened in vs.

At this point, Vue's development environment is basically built.

Preliminary study on 3,vue

The above process has built the Vue scaffolding, we first look at the site directory under a few files.

Write the first line of Vue code here?
Ask a friend to know, should open the components directory, as follows:

Opening this Hello.vue file, Vue's veil was revealed:

The original Hello world is written here in. But how does it work? Friend Tip, should run at node. js Command Line

NPM Run Dev Unfortunately, error:

The original 8080 port is occupied, go to IIS to close the site that uses the port, rerun this command, the following successful interface appears:

OK, enter the URL on the IE11 browser: http://localhost:8080/Familiar interface comes out:

Now, we will delete 2 spaces in front of Hello World in the Hello.vue file, save, the page immediately error occurred:

Here the hint format is wrong, consult a friend said, the official generated code will check the format with Eslint ...

You can use/*eslint-disable * * To disable the format check, or the space indentation can not be written, a number of spaces to give you an error.

All right, let's get these two blanks together. Do not refresh the page, after editing the Vue file saved immediately see the effect, this is vue (should be said to be the Vue scaffolding framework) magical place!

4, configuring Sublime Text

Before using vs to edit Vue project, no plug-in support, the corresponding format and smart tips are not, so friends recommend the use of sublime text, you can install the Vue plugin, the following is the configuration process

First install sublime Text 3, go to the official website to download the installation program;

Then install Sublime package Control, specifically asked "degree Niang", here slightly.

Once installed, press Ctrl+shift+p to eject the following interface, which indicates success:

Next, the dropdown selects the Install package, and if it does not respond, it may "be wall".

Open the menu preferences->packges settings->package control->setting Default, you will see the following:

File Channel_v3.json address See can access, if not access, then must be wall, first idea to go outside the wall to download this file, put on a local site, such as my address:

Http://localhost/doc/channel_v3.json

Then replace the address in the original configuration with this.

However, if you find that this file cannot be saved, click on the "tab" of this window to remember the address of this file and locate the following similar directory:

C:\Users\ "currently logged in User name" \appdata\roaming\sublime Text 3\packages\package control\package control.sublime-settings

Navigate to the Packages directory, create a package Control directory, then reopen the previous menu, open the file, and you can modify and save it.

After that, enter Vue typeface on the package control, the following interface appears, OK:

Choose a second: Vue Syntax Highlight

After that, re-open the Vue file, the following highlighted window, you are done!

So far, the "prequel" of the Vue framework Getting Started Guide has been explored.

Do you have any questions, let's study together!

Vue.js "Pre-pass" (with sublime text 3 configuration)