Vue Cli Cdn

Posted on  by admin

Modified2 years, 5 months ago. I am not familiar with packing frontend projects. When I was writing frontend, we just used JQuery.

More Vue Tutorials

So the problem is now I have a project created by vue-cli and packed by webpack. But as I don't want to load libraries from my local server but from remote CDN. How should I change the yarn add dependencies into CDN based form during yarn build? What is the correct way to do this kind of packing? I've searched a lot but cannot find a good solution, some may suggest adding all CDN in the head section. But that's difficult to manage.

55 gold badges4444 silver badges7575 bronze badges. 7575 bronze badges. update your public/index.html adding the vue script source for the cdn (preferably in the head). create a vue.config.js file in the project root with the following configuration. (if you already have the file, add configureWebpack block to it). this will flag the Vue dependency as a global, and not add it into the vendor bundle.

You can do the same with other dependencies like element-ui, vuetify, vuex, etc.. 1515 gold badges8686 silver badges133133 bronze badges. 133133 bronze badges. You can load Vue from a CDN using a script tag.For example, here's how you can load the latest version of Vue 2.x:. Once you load Vue via CDN, Vue will be a global variable that you can use normally.For example, the below is a standalone HTML page that loads Vue 2.x and adds interactivity.

Below is a live example. If you include Vue in your JavaScript files using const Vue = require('vue') or import Vue from 'vue', you can still load Vue from a CDN if you define Vue as a Webpack external. There are several advantages to loading Vue via a CDN as opposed to bundling it yourself.For one, the browser can cache Vue separately from your application, which can lead to betterperformance if you update your app frequently but use the same version of Vue.

When to Use CDN versus Bundling

For another,your build step will be faster.

  • However, the Vue docs recommend using bundling rather than loading from a CDN for "building large scale applications with Vue". Here's a few reasonswhy you might choose to bundle Vue with Webpack rather than loading via CDN. The mostimportant reason is single file components: youneed to include Vue in your build step to get SFC support.
  • However, if you don't need SFC support, you can probably get away with using a CDN. Even if youneed to npm install vue for server side rendering or testing in Node, you can use Webpack externals toexclude Vue from your final Webpack bundle in favor of loading via CDN.
  • Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase.

コード配置の例

Node.js環境は導入済みで、「Vueには、Vue CLIを使う方法があるのね?」って興味を持ち始めた人が対象。ブラウザで直接動作するCDN版からスタートするので、ES5前提。. Node.js : v8.11.3. Vue.js : v2.9.6. OS : Windows 7 / 10. つづいて、以下のコマンドを実行して、vue-cliのスケルトン的なものを作成する。これは「プロジェクト」などと呼ばれる一式。プロジェクト名は、ここでは「samplevueclie」とする。(※上述のvue-cliを「グローバル」にインストールした場合は「vue init webpack samplevueclie」で実行する).

この App.vue ファイルにて、次のように「HelloWorld.vueを表示せよ」と記述されている。(正確には、main.jsにてApp.vueを描画するよう記述されていて、App.vueに記載されたVueコンポーネントが表示される。この例では、HelloWordlコンポーネントのみが記述されているので、「実態はHelloWorld」という表現をした。). JavaScriptは、scriptタグ配下へコピーVue({})の部分は{}を取り出して、export default {}としてコピーその際に、elタグに代わってnameタグを用いるdata : {}部分は、data : function(){return: {}; }のように、関数の戻り値としてオブジェクトを返却するように変更する Vue({})以外のJavaScript部分は、そのままコピーする.

のように、関数の戻り値としてオブジェクトを返却するように変更する . なお、以降のソースコードの編集時は、npm run devしたままにしておくと、変更後のファイルを保存した時点で即座にブラウザの表示に反映される(ホットリロード機能)。保存する度にBuildコマンドを明示的に実行したり、ブラウザ表示を更新する操作は不要。.

※出力時のメッセージ「Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work.」に記載あるように、ローカルファイルとしてブラウザで開いても表示エラーするので、注意。.

Vue.js公式サイト - Web. 基礎から学ぶVue.js - 本. モジュール化できるってことは、ファイル単位でのUnitTestも簡単にできるってこと。Vue-CLIでのMochaによるTest実行方法も こちら に書いてみた。なお↑は、Vue-CLI自身が「Karma+Mocha」でのテストを準備してくれているので、その仕組みに沿って「やってみた」って内容。.

Vue-CLIでのMochaによるTest実行方法も こちら に書いてみた。. fontawesomeを使おうとすると、どこでlink読み込む?問題にぶつかる。*.vueファイル内で直に読み込む方法もあるようだが、nodejsのモジュールとして追加でnpm installする方法が望ましい。. Today I am going to share how to route in Vue.js using CDN only. We won’t use CLI, Webpack, etc. We are going to see the very simple routing. For the big project, we have to use Vue Router using CLI. In localhost, normally we use Apache as a server. In the root directory of our project we have to create a .htaccess file and need to paste this code:.

For Nginx and other servers, please take a look at this page: Example Server Configurations.

We need two JS CDN. One is vue and another is vue-router. Let’s the CDN URLs:. In the root folder of your project, create a folder named “pages“. In page folder, create three files called home.vue.js, about.vue.js, and contact.vue.js.

Now copy and paste these code:. At this step, we are going to create a Vue object and define the routes.

Take a look at the code:. In this file, we have to include the CDN, vue pages and need to define the #app element div.

Open the project via a browser and see the output like this:. You can see the project file structure and download the project from GitHub.

We have successfully created Vue routes using CDN.

airport-codes/src/views/Home.vue

You may notice that there is some CSS included in this code snippet. In the Home.vue component, you are iterating through a collection of airports, each of which is assigned a CSS class of airport. This CSS adds some styling to the generated HTML by making borders to give each airport the apperance of a card. :first-child and :last-child are pseudo selectors that apply different styling to the first and last p tags in the HTML inside of the div with the class of airport.

Save and close the file.

Now that you have this initial view created along with the local dataset, you will install Vue Router in the next step.

移行の大雑把な流れ

There are a few ways you can install Vue Router. If you are creating a new project from scratch with the Vue CLI, you can select Vue Router in the prompt; Vue CLI will then install and configure it for you. For the sake of this tutorial, however, it is assumed that you did not select the Vue Router option in the CLI setup. You will instead install Vue Router via npm.

To install Vue Router, first move from the src directory back to the root of your project directory:

Then run the following in your terminal window in the root directory of your project:

You may notice the @next in this command. Since this project is using Vue 3 and the Composition API, you are telling npm to download the latest experimental version of this library. If you would like more information on current releases, check out the Vue Router release page on GitHub.

This will download the vue-router library from npm and add it to your package.json file, so that it automatically downloads the next time you run npm install.

The next step is to create your routes file. This file will contain all the possible routes that the user can navigate to. When a certain route is visited in the URL bar, the component that is associated with a URL route will mount.

In your terminal, in the src directory, move into the src directory and create a router directory:

Next, create an index.js file inside the router directory:

Open the file you just created into an editor of your choice. The first thing to do is import the Vue Router library. You actually don’t need to access everything in this library in order to create routes. You can opt to destructure or import only what you need to minimize the bundle size. In this case, you need two functions from vue-router: createWebHistory and createRouter. These functions create a history that a user can go back to and construct a router object for Vue, respectively.

Add the following code to router/index.js:

Next, add the following highlighted lines to create and export your router:

airport-codes/src/router/index.js

This file will export a router object that is returned from the createRouter function. The object you pass in has two properties: history and routes. The history property contains the generated history from createWebHistory and routes is an array of objects. You will add routes later in this tutorial.

Next, import the Home view and create an array of objects, storing them into a const called routes:

Each route is an object with three properties:

  • path: The URL address
  • name: An assigned name to reference a route in your project
  • component: The component that gets mounted when the path is entered in the URL bar of the browser

Now that your routes array as been created, you will need to add it to the exported router object.

After the history key/value pair, add routes. This is shorthand for routes: routes in JavaScript:

airport-codes/src/router/index.js

At this point, Vue Router is integrated into your project, and you have a route registered. Save and exit the file.

In another terminal, run the following command to start a development server on your local machine:

If you visit localhost:8080/ in your browser window, you will not see the Home.vue component just yet. The last step in this integration process is to tell Vue to listen to this router/index.js file and inject the mounted component where is referenced. To do this, you need to reference it in the src/main.js file of your application.

First, open src/main.js. Then add the following highlighted lines:

With this .use() function that is chained to createApp, Vue.js is now listening to route changes and leveraging your src/router/index.js file. However, Vue Router has no way to display the mounted Home.vue component. To do this, you need to add the router-view component inside your App.vue file. This component tells Vue Router to mount any component associated with a route where is.

Save and exit the main.js file.

Next, open the App.vue file. Delete the default contents and replace it with the following:

airport-codes/src/App.vue

Save and exit the file.

Now visit localhost:8080/ in your browser. You will find the Home.vue component rendered, as shown in the following screenshot:

Vue Router has now been downloaded and integrated with a registered route. In the next section, you are going to create additional routes, including two internal pages and a default 404 page if no route was detected.

動作確認環境

At this point, your App.vue can render any component configured in your src/router/index.js file. When working with a Vue CLI-generated project, one of the directories that is created for you is views. This directory contains any .vue component that is directly mapped to a route in the router/index.js file. It’s important to note that this isn’t done automatically. You will need to create a .vue and import it into your router file to register it, as detailed earlier.

Before you have all of your other routes defined, you can create a default route. In this tutorial, this default route will act as a 404 - Not Found page—a fallback in the case no route is found.

First, create the view that will act as the 404 page. Change into the views directory:

Then create a file called PageNotFound.vue:

In your text editor, open this PageNotFound.vue file that you just created. Add the following HTML code to give the view something to render:

Save and close the file.

Now that the PageNotFound.vue component has been created, it’s time to create a catch-all route for your application. Open up the src/router/index.js file in your text editor and add the following highlighted code:

airport-codes/src/router/index.js

Vue Router for Vue 3 uses a custom RegEx. The value of path contains this new RegEx, which is telling Vue to render PageNotFound.vue for every route, unless the route is already defined. The catchAll in this route refers to a dynamic segment within Vue Router, and (.*) is a regular expression that captures any string.

Save this file and visit your application in your browser window at localhost:8080/not-found. You will find the PageNotFound.vue component rendered in your browser, as shown in the following image:

Feel free to change this URL to anything else; you will get the same result.

Before moving on, create another route for your application. This route will be an about page.

Open your terminal of choice and create the file in the views directory:

In your text editor, open this About.vue file that you just created. Add the following HTML to create more information about your site:

Save and close the file.

With that view created, open the src/router/index.js file in your text editor, import the About.vue component, and register a new route with a path of /about:

airport-codes/src/router/index.js

Save and close the file.

At this point, you have three different routes:

  • localhost:8080/, which routes to Home.vue
  • localhost:8080/about, which routes to About.vue
  • Any other route, which by default goes to PageNotFound.vue

Once you save this file, open your browser and first visit localhost:8080/. Once the application loads, you will find the contents of Home.vue: the collection of airport cards.

Continue testing these routes by visiting localhost:8080/about. This is a static route, so you will find the contents of the About.vue component, which at this point contains a heading and a paragraph.

Next, you can test the PageNotFound.vue component by visiting anything else in your browser. For example, if you visit, localhost:8080/some-other-route, Vue Router will default to that catchAll route since that route is not defined.

As this step illustrates, Vue Router is a handy first-party library that renders a component that is associated with a specific route. In this step, this library was downloaded and integrated globally through the main.js file and was configured in your src/router/index.js file.

So far, most of your routes are exact routes. This means a component will only mount if the URL fragment matches the path of the router exactly. However, there are other types of routes that have their own purpose and can dynamically generate content. In the next step, you are going to implement the different types of routes and learn when to use one or the other.

考え方

At this point, you have created two exact routes and a dynamic route to a 404 page. But Vue Router has more than these types of routes. You can use the following routes in Vue Router:

  • Dynamic Routes: Routes with dynamic parameters that your application can reference to load unique data.
  • Named Routes: Routes that can be accessed using the name property. All the routes created at this point have a name property.
  • Nested Routes: Routes with children associated with them.
  • Static or Exact Routes: Routes with a static path value.

In this section, you will create a dynamic route displaying individual airport information and a nested route for airport destinations.

Vue-CLIのプロジェクトから、公開用のファイルをビルドする。

A dynamic route is useful when you want to reuse a view to display different data depending on the route. For example, if you wanted to create a view that displays airport information depending on the airport code in the URL bar, you could use a dynamic route. In this example, if you were to visit a route of localhost:8080/airport/cvg, your application would display data from the airport with the code cvg, the Cincinnati/Northern Kentucky International Airport. Next, you will create this view as described.

Open up your terminal and create a new .vue file with the touch command. If src is your current working directory, the command will look like this:

After that is created, open this file in your text editor of choice. Go ahead and create your template and script tags to set up this component:

Save and close this file.

Next, you need to register this view in the src/router/index.js file. Open up this file in your text editor, then add the following highlighted lines:

airport-codes/src/router/index.js

The :code in this new route is called a parameter. A parameter is any value that can be accessed in your application via this name. In this case, you have a parameter named code. Next, you will display the information associated with this abbreviation by leveraging this parameter.

Save and close this file.

Now that you have some data, open the AirportDetail.vue component again. Import the airport data in this component:

Next, create a computed property that returns one object from the array if the abbreviation property of that object matches the :code parameter in the URL. In Vue 3, you need to destructure computed from the vue library:

airport-codes/src/views/AirportDetail.vue

This computed property uses the filter array method in JavaScript to return an array of objects if the condition is met. Since you only want one object, the code will always return the first object, which it will access with the [0] index syntax. The route.params.code is how you access the parameter that was defined in your router file. In order to access the route’s properties, you will need to import a function from vue-router named useRoute. Now when visiting a route, you have immediate access to all of the route’s properties. You are using dot notation to access this code param and retrieve its value.

At this point, this computed property will return a single airport object if the code in the URL matches the abbreviation property. This means that you have access to all of the object properties of an airport and can construct the template of this component.

Continue editing the AirportDetail.vue file in your text editor and build out your template to display the information of the airport:

Open your browser and visit localhost:8080/airport/sea. Information related to the Seattle-Tacoma International Airport will render in your browser, as shown in the following image:

余白

As your application grows, you may find that you have a number of routes that are related to a parent. A good illustration of this could be a series of routes associated with a user. If there is a user named foo, you could have multiple nested routes for the same user, each starting with /user/foo/. When the user is on the /user/foo/profile route, the user would be viewing a profile page associated with them. A posts page for the user might have a route of /user/foo/posts. This nesting can give you the ability to organize your routes along with your components. For more information on this, check out the Vue Router documentation.

You can apply this same pattern to the application you’ve built throughout this tutorial. In this section, you’re going to add a view to display the destinations that each airport supports.

Open your terminal and, in the src directory, create a new file with the name AirportDestinations.vue:

Next, open your text editor and add the following:

airport-codes/src/views/AirportDestinations.vue

This view will render all of the destinations for each airport from the airports.js file. In this view, you are using the v-for directive to iterate through the destinations. Much like the AirportDetail.vue view, you are creating a computed property called airport to get the airport that matches the :code parameter in the URL bar.

Save and close the file.

To create a nested route, you need to add the children property to your route object in the src/router/index.js file. The child (nested) route object contains the same properties as its parent.

Open up router/index.js and add the following highlighted lines:

The path for this child route is short compared to its parent. That is because, with nested routes, you do not need to add the entire route. The child inherits its parent’s path and will prepend it to the child path.

Open your browser window, and visit localhost:8080/airport/msp/destinations. Nothing appears to be different from the parent, AirportDetails.vue. That is because when using nested routes, you need to include the component in the parent. When visiting the child route, Vue will inject the content from the child view into the parent:

airport-codes/src/views/AirportDetail.vue

In this case, when visiting the destinations route in the browser, AirportDestinations.vue will display an unordered list of the destinations that the Minneapolis-Saint Paul International Airport supports, for both passenger and cargo flights.

In this step, you created dynamic and nested routes and learned how to use a computed property that checks against the :code parameter in the URL bar. Now that all the routes have been created, in the final step, you are going to navigate between the different types of routes by creating links with the component.

Table of Contents

When working with single-page applications, there are a few caveats you need to be aware off. Since every page is bootstrapped into a single HTML page, navigating between internal routes using the standard anchor () will not work. Instead, you will need to use the component provided by Vue Router.

Unlike the standard anchor tag, router-link provides a number of different ways to link to other routes in your application, including using named routes. Named routes are routes that have a name property associated with them. Every link that you have created up to this point has a name already associated with it. Later in this step, you’ll learn how to navigate using name rather than the path.

余白

The component was globally imported when you initially integrated Vue Router into your application. To use this component, you will add it to your template and provide it with a prop value.

Open the Home.vue component within the views directory in your editor. This view displays every airport that you have in the airports.js file. You can use router-link to replace the containing div tag in order to make each card clickable to their respective detail view.

Add the following highlighted lines to Home.vue:

At the bare minimum, router-link requires one prop called to. This to prop accepts an object with a number of key/value pairs. Since this card uses the v-for directive, these cards are data driven. You’ll need to be able to navigate to the AirportDetail.vue component. If you review the path for that component, it is accessible via /airports/:code.

When navigating via the path property, it is a one-to-one match. Add the following highlighted segments:

In this code, you are using JavaScript string interpolation to insert the airport code dynamically as the value for the path property. However, as your applications grows in scale, you may find that navigating to a different route via the path is not the best method. In fact, it is generally considered best practice to navigate using named routes.

To implement a named route, use the name of the route over the path. If you reference src/router/index.js you will find that AirportDetail.vue has a name of AirportDetail:

The benefit of using named routes over exact routes is that named routes are not dependent on the path of the route. URL structures will always change in development, but the name of the route will seldom change.

You might notice that you cannot pass in the airport code as you did earlier with the exact route. If you need to pass in parameters into a named route, you will need to add the params property containing an object that represents your parameter:

Save this file and view it in your browser at localhost:8080. Clicking on the Seattle-Tacoma airport card will now navigate you to localhost:8080/airport/sea.

Step 5 : The Final Index File

The component is great to use when you need to navigate to another view within your HTML template. But what about those cases when you need to navigate between routes within a JavaScript function? Vue Router offers a solution to this problem called programmatic navigation.

Earlier in this tutorial, you created a catch-all route called PageNotFound. It would be a good user experience to always navigate to that page if the airport computed property returned undefined in the AirportDetail.vue and AirportDestinations.vue components. In this section, you will implement this feature.

In your text editor, open the AirportDetail.vue component. To achieve this, detect if airport.value is undefined. This function will be called when the component is first mounted, which means you will need to use Vue’s lifecycle methods.

Add the following highlighted lines:

In this onMounted function, you are checking if airport.value is a falsy value. If it is, then you route to PageNotFound. You can handle programmatic routing similarly to how you handled the router-link component. Since you cannot use a component in JavaScript functions, you need to use router.push({ ... }). This push method of the router object accepts the value of the to prop when using the link component:

If the route doesn’t exist, or if the data is not returned properly, this will protect the user from the broken web page.

Save the file and navigate to localhost:8080/airport/ms. Since ms is not an airport code in the data, the airport object will be undefined, and the router will redirect you to the 404 page.

Share on Social Media

In this tutorial, you used Vue Router to create a web application that routes between different views. You learned the different types of routes, including exact, named, and nested, as well as created links with parameters using the router-link component. In the final step, you provided programmatic navigation using JavaScript by leveraging the router’s push() function.

For more information on Vue Router, it’s recommended to read through their documentation. The CLI tool specifically has many additional features that weren’t covered in this tutorial. For more tutorials on Vue, check out the Vue Topic Page.